react基础 - 组件实例的三大核心属性-props

最新推荐文章于 2024-09-05 10:32:52 发布

hibufan

最新推荐文章于 2024-09-05 10:32:52 发布

阅读量127

点赞数

分类专栏： # React 文章标签： react.js

本文链接：https://blog.csdn.net/qq_45903342/article/details/125682712

版权

React 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

props

所有组件标签的属性的集合对象
给标签指定属性, 保存外部数据(可能是一个function)
在组件内部读取属性: this.props.propertyName
作用: 从目标组件外部向组件内部传递数据

 <body>
    <!-- props基本用法 -->
        <div id="test"></div>
        <div id="test1"></div>
        <div id="test2"></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
                    return(
                        <ul>
                            <li>姓名:{name}</li>
                            <li>性别:{sex}</li>
                            <li>年龄:{age+1}</li>
                        </ul>
                    )
                }
                // 给类自身加属性，放在类里----static
                //对props中的属性值进行类型限制和必要性限制---数据类型  必填项  默认值
                static propTypes = {  
                //这个需要引入依赖包prop-types.js---使全局增加PropTypes
                    name: PropTypes.string.isRequired,
                    age: PropTypes.number.isRequired,
                    speak: PropTypes.func,
                }
                    
                static defaultProps ={
                    
                            //默认设置
                            sex:'男',
                            age:18
                        }
            }
   
       
    
            //注意一个小细节：在进行number计算的时候，如年龄，没传入值，返回的就是undefined，然后undefined+1，会NaN,因此要给年龄设置一下默认值
    
            // 渲染组件  批量传递数据（批量传递标签属性）
            const p={name:'tom', age:18, sex:'女'}
            // ReactDOM.render(<Person name={p.name} age={p.age} sex={p.sex}/>,document.getElementById('test'))
            //扩展属性: 将对象的所有属性通过props传递 <Person {...person}/>
            //react+babel 下可以允许展开运算符展开对象，但不能随意使用--仅仅适用于标签属性的传递
            ReactDOM.render(<Person {...p}/>,document.getElementById('test'))
            ReactDOM.render(<Person name='com' age={19} sex='男' speak={speak} />,document.getElementById('test1'))
            ReactDOM.render(<Person name='xom' age={20} sex='女'/>,document.getElementById('test2'))

            function speak(){
                console.log('speak方法');
            }
        </script>
    </body>

复习一下ES6扩展运算符：

<body>
    <script>
        let arr1=[1,3,5,7,9]
        let arr2=[2,4,6,8,10]
        console.log(...arr1);//展开一个数组
        let arr3=[...arr1,...arr2]//连接数组
    
        function sum(...numbers){
    
        console.log(numbers)//[1,2]---数组
        //如何计算数组里每一项的和--reduce
        return numbers.reduce(()=>{})
            return preValue +currentValue
        
        }
        console.log(sum(1,2))
    
    
        let person={name:'tom',age:'18'}
        let person2={...person}//复制了一个对象
        // console.log(...person)//报错--展开运算符不能展开对象
        person.name='jerry'
        console.log(person2)//{name: 'tom', age: '18'}
        console.log(person)//{name: 'jerry', age: '18'}
    </script>
</body>

注意：

1. props是只读的，不可以修改

2. 类式组件中的构造器可以省略，构造器中是否接porps，是否传传给super，没大的影响，但会有一个this.porps的bug，就是在构造器中没办法通过实例.porps去取值，因此当需要通过this访问porps时，必须传必须接，否则undefined (不过几乎用不到)

函数式组件使用props:

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

hibufan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
react基础 - 组件实例的三大核心属性-props

props所有组件标签的属性的集合对象给标签指定属性, 保存外部数据(可能是一个function)在组件内部读取属性: this.props.propertyName作用: 从目标组件外部向组件内部传递数据复习一下ES6扩展运算符：注意：1. props是只读的，不可以修改2. 类式组件中的构造器可以省略，构造器中是否接porps，是否传传给super，没大的影响，但会有一个this.porps的bug，就是在构造器中没办法通过实例.porps去取值，因此当需要通过this访问porps时
复制链接

扫一扫

专栏目录