05_组件实例三大属性

于 2022-08-04 16:39:34 发布
阅读量46 收藏
点赞数
分类专栏： react学习 文章标签： javascript 前端 react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46431018/article/details/126161763
版权

1.state属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>state</title>
</head>
<body>
    
    <div id="test"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
         //1.创建类式组件
         class Weather extends React.Component{
            //构造器调用几次？—— 1次
            constructor(props){
                console.log('constructor')
                super(props)
                //初始化状态
                this.state={isHot:true,wind:'微风'};
                //解决changeWeather中this指向问题
                this.changeWeather =this.changeWeather.bind(this)
            };
            //render调用几次？—— 1+n次 1是初始化那一次，n是状态更新的次数
            render(){
                console.log('render')
                const {isHot,wind} =this.state
                //console.log(this)
               
                return <h1 onClick={this.changeWeather}>今天天气有点{isHot ? '热' : '冷'},{wind ? '微风' : '大风'}</h1>
            }
            //changeWeather调几次？ ——点几次，调几次
            changeWeather(){
                //changeWeather放在哪里？—— Weather的原型对象上，供实例调用
                //由于changeWeather是作为onClick的回调，所以不是通过实例调用的，是直接调用
                //类中的方法默认开启了局部的严格模式，所以changeWeather中的this为undefind
                //console.log(this)
                
                console.log('changeWeather')
                //获取原来的isHot值
                const isHot =this.state.isHot
                //状态必须通过（setstate）进行更新,且更新是一种合并，不是替换
                this.setState({
                    isHot:!isHot
                })

                this.changeWind()

                //状态（state）不可直接更改，要借助内置的API去更改
                //this.state.isHot= !isHot 这是错误写法
                console.log(this.state.isHot)
                }

                changeWind(){
                  const wind =  this.state.wind
                  this.setState({
                    wind:!wind
                  })
                }
        }

       
        // 2.渲染类式组件到页面
        ReactDOM.render(<Weather/>,document.getElementById("test"))

        //必须放在渲染下面 
        //TODO 什么原因
        // const title =document.getElementById("title")
        //  title.addEventListener('click',()=>{
        //     console.log('标题被点击了');
        //  })


        // const title =document.getElementById("title")
        //  title.onclick =()=>{
        //     console.log('标题被点击了');
        //  }

        // function title(){
        //     alert("标题被点击了")
        // }

    </script>
</body>
</html>

 

 state简写方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
     <!-- 准备容器 -->
    <div id="test"></div>
    <!-- 引入核心库 -->
    <script type="text/javascript" src="../js/react.development.js"></script>
    <!-- 引入用于支持React操作DOM -->
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <!-- 引入用于将jsx转成js -->
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
     class Weather extends React.Component{
        // constructor(props){
        //     super(props)
        //     //this.state={isHot:true,wind:'微风'}
        //     //this.changeWeather=this.a.bind(this)
        // }

        state={isHot:true,wind:'微风'}
        render(){
            const {isHot,wind}=this.state
            return  <div><h1 onClick={this.a}>今天天气很{isHot ? '热' : '冷'},{wind}</h1></div>
        }


        //自定义方法——要用赋值语句的形式+箭头函数
        a=()=>{
            const b =this.state.isHot
            this.setState({
                isHot:!b
            })
        }
     }

     ReactDOM.render(<Weather/>,document.getElementById("test"))

 </script>
</body>
</html>

2.props使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>props基本使用</title>
</head>

<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>

    <script type="text/babel">
        //创建类组件
        class Pereson extends React.Component {

            render() {
                //console.log(this)
                const { name, age, sex } = this.props
                return (<div>
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age+1}</li>
                    </ul>
                </div>)

            }

        }
        //渲染组件到页面
        ReactDOM.render(<Pereson name="tom" age={18} sex='女' />, document.getElementById("test1"))
        ReactDOM.render(<Pereson name="a" age={20} sex='男' />, document.getElementById("test2"))
        //ReactDOM.render(<Pereson name="b" age='30' sex='女'/>,document.getElementById("test3"))

        const p = { name: 'b', age: 19, sex: "女" }
        //ReactDOM.render(<Pereson name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test3'))
        ReactDOM.render(<Pereson {...p} />, document.getElementById('test3'))




    </script>


</body>

</html>

对props进行限制

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>对props进行限制</title>
</head>

<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>


    <script type="text/babel">
        class Person extends React.Component {
            render() {
                const { name, age, sex } = this.props
                //props是只读的
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age + 1}</li>
                        <li>性别：{sex}</li>

                    </ul>
                )
            }
        }
        //小写大写问题需注意
        //对标签属性进行类型，必要性的限制
        Person.propTypes = {
            name: PropTypes.string.isRequired,//限制name必传，且为字符串
            sex: PropTypes.string,//限制sex为字符串
            age: PropTypes.number,//限制age为数值
            speak: PropTypes.func,//限制speak为函数
        }
        //指定默认标签属性值
        Person.defaultProps = {
            sex: '不男不女',//性别默认值为
            age: 18//年龄默认值为 
        }

        ReactDOM.render(<Person name="tom" age={18} sex="男" speak={speak} />, document.getElementById("test1"))

        ReactDOM.render(<Person name="a" age={20} sex="女" />, document.getElementById("test2"))
        const p = { name: 'b', age: 18, sex: "女" }
        ReactDOM.render(<Person {...p} />, document.getElementById("test3"))

        function speak() {
            console.log("我说话了")
        }
    </script>

</body>

</html>

props的简写

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>props的简写方式</title>
</head>

<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Person extends React.Component {
            //构造器是否接收props，是否传递给super,取决于：是否希望在构造器中通过this访问props
            constructor(props){
                console.log(props)
                super(props)
            }
            static propTypes = {
                name: PropTypes.string.isRequired,
                age: PropTypes.number,
                sex: PropTypes.string,
            }

            static defaultProps = {
                sex: "男",
                age: 18
            }

            render() {
                const { name, sex, age } = this.props
                return (
                    <ul>
                        <li>姓名：{name}</li>
                        <li>性别：{sex}</li>
                        <li>年龄：{age + 1}</li>
                    </ul>
                )
            }
        }



        ReactDOM.render(<Person name="a" age={18} sex="男" />, document.getElementById("test1"))
        ReactDOM.render(<Person name='b' age={20} sex="女" />, document.getElementById("test2"))
        const p1 = { name: "c", age: 18, sex: "男" }
        ReactDOM.render(<Person {...p1} />, document.getElementById("test3"))

    </script>

</body>

</html>

 函数式组件使用

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>函数式组件使用props</title>
</head>

<body>
    <div id="test1"></div>
    <div id="test2"></div>
    <div id="test3"></div>

    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        // class Person extends React.Component {

        //     static propTypes = {
        //         name: PropTypes.string.isRequired,
        //         age: PropTypes.number,
        //         sex: PropTypes.string
        //     }

        //     static defaultProps = {
        //         age: 18,
        //         sex: "男"
        //     }

        //     render() {
        //         const { name, age, sex } = this.props
        //         return (
        //             <ul>
        //                 <li>姓名：{name}</li>
        //                 <li>性别：{sex}</li>
        //                 <li>年龄：{age + 1}</li>
        //             </ul>
        //         )
        //     }
        // }

        function Person(props) {
            console.log(props)
            const { name, age, sex } = props
            return (
                <ul>
                    <li>姓名：{name}</li>
                    <li>性别：{sex}</li>
                    <li>年龄：{age}</li>
                </ul>
            )
        }

        Person.propTypes = {
            name: PropTypes.string.isRequired,
            age: PropTypes.number,
            sex: PropTypes.string,
        }

        Person.defaultProps = {
            sex: "男",
            age: 18
        }
        ReactDOM.render(<Person name="a" age={18} sex="男" />, document.getElementById("test1"))
        ReactDOM.render(<Person name='b' age={20} sex="男" />, document.getElementById("test2"))
        const p1 = { name: "c", age: 18, sex: "男" }
        ReactDOM.render(<Person {...p1} />, document.getElementById("test3"))
    </script>

</body>

</html>

3.refs使用

字符串形式的ref

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>字符串形式的ref</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            //展示左侧输入框的数据
            showData = () => {
                //  const input  = document.getElementById('input1')
                //  alert(input.value)
                console.log(this.refs.input1)

                const { input1 } = this.refs
                alert(input1.value)

            }

            //展示左侧输入框的数据
            showData2 = () => {
                const { input2 } = this.refs
                alert(input2.value)
            }

            render() {
                return (
                    <div>
                        <input ref='input1' type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData}>点我提示左侧数据</button>&nbsp;
                        <input ref='input2' onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />&nbsp;
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo a="1" b="2" />, document.getElementById("test"))
    </script>
</body>

</html>

 回调函数形式的ref

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <title>字符串形式的ref</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            //展示左侧输入框的数据
            showData = () => {
                //  const input  = document.getElementById('input1')
                //  alert(input.value)
                console.log(this.refs.input1)

                const { input1 } = this.refs
                alert(input1.value)

            }

            //展示左侧输入框的数据
            showData2 = () => {
                const { input2 } = this.refs
                alert(input2.value)
            }

            render() {
                return (
                    <div>
                        <input ref='input1' type="text" placeholder="点击按钮提示数据" />&nbsp;
                        <button onClick={this.showData}>点我提示左侧数据</button>&nbsp;
                        <input ref='input2' onBlur={this.showData2} type="text" placeholder="失去焦点提示数据" />&nbsp;
                    </div>
                )
            }
        }

        ReactDOM.render(<Demo a="1" b="2" />, document.getElementById("test"))
    </script>
</body>

</html>

createRef

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>

<body>
    <div id="test"></div>
    <script type="text/javascript" src="../js/react.development.js"></script>
    <script type="text/javascript" src="../js/react-dom.development.js"></script>
    <script type="text/javascript" src="../js/babel.min.js"></script>
    <script type="text/javascript" src="../js/prop-types.js"></script>

    <script type="text/babel">
        class Demo extends React.Component {
            /* 
            React.ceateRef调用后可以返回一个容器，该容器可以存储被ref所标识的节点,该容器是专人专用的
             */
            myRef = React.createRef()
            myRef2 = React.createRef()

            showData = () => {
                console.log(this.myRef.current.value)
                const myRef = this.myRef.current
                alert(myRef.value)
            }

            showData2=()=>{
                alert(this.myRef2.current.value)
            }

            render() {
                return (
                    <div>
                        {/* <input ref={(currentNode) => { this.input1 = currentNode }} type="text" /> */}
                        <input ref={this.myRef} type="text" />
                        <button onClick={this.showData}>点我提交</button>
                        <input ref={this.myRef2} onBlur={this.showData2} type="text" />
                    </div>
                )
            }
        }
        ReactDOM.render(<Demo />, document.getElementById("test"))
    </script>
</body>

</html>

又菜又爱玩代码
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值