组件实例的三大属性

最新推荐文章于 2024-09-14 23:28:04 发布

橘子羊

最新推荐文章于 2024-09-14 23:28:04 发布

阅读量654

点赞数

分类专栏： react学习笔记文章标签： react.js

本文链接：https://blog.csdn.net/weixin_45310428/article/details/121488612

版权

react学习笔记专栏收录该内容

5 篇文章 0 订阅

订阅专栏

state

<div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
       class MyComponent extends React.Component{
        // 初始化状态
        state={isHot:false,wind:"微风"}
          render(){
              const {isHot,wind}=this.state
              return(
                <div>
                    <h1 onClick={this.changeWeather}>今天天气很{isHot?"暖和":"凉爽"},{wind}</h1>
                </div>
              )
              
          }
        //  自定义方法
          changeWeather=()=>{
            var isHot=this.state.isHot
            this.setState({isHot:!isHot})
          }
       }
    //    2.将组件渲染到页面
       ReactDOM.render(<MyComponent />,document.getElementById("test"))
    </script>

props

<div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- 引入prop-types，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class Person extends React.Component {
            
            render() {
                const {name,sex,age}=this.props
                return (
                    <div>
                        <ul>
                            <li>姓名：{name}</li>
                            <li>年龄：{age+1}</li>
                            <li>性别：{sex}</li>
                        </ul>
                    </div>
                )

            }
        }
        // 对标签属性进行类型，必要性的限制
        Person.propTypes={
            name:PropTypes.string.isRequired,  //限制name必传且为字符串
            sex:PropTypes.string,//限制sex为字符串
            age:PropTypes.number,//限制age为数值
            speak:PropTypes.func//限制speak为函数
        }
        // 指定默认标签属性值
        Person.defaultProps={
            sex:"男",//指定sex默认值为男
            age:18//指定age默认值为18
        }
        function speak(){
            console.log("我说话了")
        }
        //    2.将组件渲染到页面
        ReactDOM.render(<Person name="张三" speak={speak} />, document.getElementById("test"))
        ReactDOM.render(<Person name="李四" sex="女" age={21} />, document.getElementById("test1"))

        // 批量传递
        const p={name:"王五",sex:"女",age:18}
        ReactDOM.render(<Person {...p} />, document.getElementById("test2"))
    </script>

简写：

<div id="test"></div>
    <div id="test1"></div>
    <div id="test2"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <!-- 引入prop-types，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/prop-types@15.6/prop-types.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class Person extends React.Component {
            // 对标签属性进行类型，必要性的限制
            static propTypes={
                name:PropTypes.string.isRequired,  //限制name必传且为字符串
                sex:PropTypes.string,//限制sex为字符串
                age:PropTypes.number,//限制age为数值
                speak:PropTypes.func//限制speak为函数
            }
            // 指定默认标签属性值
            static defaultProps={
                sex:"男",//指定sex默认值为男
                age:18//指定age默认值为18
            }
            render() {
                const {name,sex,age}=this.props
                return (
                    <div>
                        <ul>
                            <li>姓名：{name}</li>
                            <li>年龄：{age+1}</li>
                            <li>性别：{sex}</li>
                        </ul>
                    </div>
                )

            }
        }
       
        function speak(){
            console.log("我说话了")
        }
        //    2.将组件渲染到页面
        ReactDOM.render(<Person name="张三" speak={speak} />, document.getElementById("test"))
        ReactDOM.render(<Person name="李四" sex="女" age={21} />, document.getElementById("test1"))

        // 批量传递
        const p={name:"王五",sex:"女",age:18}
        ReactDOM.render(<Person {...p} />, document.getElementById("test2"))
    </script>

refs

字符串形式的ref (不建议使用)

<div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class Person extends React.Component {
            render() {
                // console.log(this)
                return (
                    <div>
                        <input ref="demo1" type="text" placeholder="点击按钮出现弹框" />&nbsp;
                        <button onClick={this.clickShow}>点击按钮出现弹框</button>&nbsp;
                        <input ref="demo2" onBlur={this.blurShow} type="text" placeholder="鼠标失焦出现弹框" />
                    </div>
                )
            }
            clickShow=()=>{
                alert(this.refs.demo1.value)
            }
            blurShow=()=>{
                alert(this.refs.demo2.value)
            }
        }
    //    将组件渲染到页面
        ReactDOM.render(<Person />, document.getElementById("test"))
    </script>

回调形式的ref

<div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class Person extends React.Component {
            render() {
                return (
                    <div>
                        {/*<input ref={currentNode=>this.demo1=currentNode} type="text" placeholder="点击按钮出现弹框" />&nbsp;*/}
                        <input ref={this.showValue} type="text" placeholder="点击按钮出现弹框" />&nbsp;
                        <button onClick={this.clickShow}>点击按钮出现弹框</button>&nbsp;
                        <input ref={currentNode=>this.demo2=currentNode} onBlur={this.blurShow} type="text" placeholder="鼠标失焦出现弹框" />
                    </div>
                )
            }
            // 参考官网：
            // 如果 ref 回调函数是以内联函数的方式定义的，
            // 在更新过程中它会被执行两次，第一次传入参数 null，然后第二次会传入参数 DOM 元素。
            // 这是因为在每次渲染时会创建一个新的函数实例，
            // 所以 React 清空旧的 ref 并且设置新的。
            // 通过将 ref 的回调函数定义成 class 的绑定函数的方式可以避免上述问题，
            // 但是大多数情况下它是无关紧要的。
            showValue=(currentNode)=>{
                this.demo1=currentNode
            }
            clickShow=()=>{
                const {demo1}=this
                alert(demo1.value)
            }
            blurShow=()=>{
                const {demo2}=this
                alert(demo2.value)
            }
        }
       //    将组件渲染到页面
        ReactDOM.render(<Person />, document.getElementById("test"))
    </script>

createRef的使用

<div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class Person extends React.Component {
            myRef=React.createRef()
            myRef2=React.createRef()
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮出现弹框" />&nbsp;
                        <button onClick={this.clickShow}>点击按钮出现弹框</button>&nbsp;
                        <input ref={this.myRef2} onBlur={this.blurShow} type="text" placeholder="鼠标失焦出现弹框" />
                    </div>
                )
            }
            clickShow=()=>{
                alert(this.myRef.current.value)
            }
            blurShow=()=>{
                alert(this.myRef2.current.value)
            }
        }
       //    将组件渲染到页面
        ReactDOM.render(<Person />, document.getElementById("test"))
    </script>

事件处理

<div id="test"></div>
    <!-- 引入react核心库 -->
    <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <!-- 引入react-dom，用于支持react操作DOM -->
    <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <!-- 引入babel，用于对组件标签属性进行限制 -->
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
        // 1.创建类式组件
        class Person extends React.Component {
            /*
                (1).通过onXxx属性指定事件处理函数（注意大小写）
                    a.React使用的是自定义（合成）事件，而不是使用的原生DOM事件——为了更好地兼容；
                    b.React中的事件是通过事件委托方式处理的（委托给组件最外层的元素）——为了更高效。
                (2).通过event.target得到发生事件的DOM元素对象——不要过度使用ref。
            */
            // 创建ref容器
            myRef=React.createRef()
            myRef2=React.createRef()
            render() {
                return (
                    <div>
                        <input ref={this.myRef} type="text" placeholder="点击按钮出现弹框" />&nbsp;
                        <button onClick={this.clickShow}>点击按钮出现弹框</button>&nbsp;
                        <input onBlur={this.blurShow} type="text" placeholder="鼠标失焦出现弹框" />
                    </div>
                )
            }
            clickShow=()=>{
                alert(this.myRef.current.value)
            }
            blurShow=(event)=>{
                alert(event.target.value)
            }
        }
       //    将组件渲染到页面
        ReactDOM.render(<Person />, document.getElementById("test"))
    </script>