React：组件实例三大属性之(props)

🍳如有不对，欢迎一起讨论

概述

react组件实例中共有三大属性，分别为state、props、refs。其中props，是properties的简写，字面意思为“属性”，在组件上绑定的属性都在props里。

作用： 通过标签属性从组件外向组件内传递变化的数据
注意： props属性是只读的，也就是不能修改，只能读取

---

基本使用

    <!-- 创建容器标签 -->
    <div id="root"></div>
    <!-- React核心文件 -->
    <script src="../js/react.development.js"></script>
    <!-- react操作DOM文件 -->
    <script src="../js/react-dom.development.js"></script>
    <!-- 属性限制文件 -->
    <script src="../js/prop-types.js"></script>
    <!-- babel转换jsx为js -->
    <script src="../js/babel.min.js"></script>
	<script type="text/babel">
    // 创建类组件
    class Person extends React.Component{
        render(){
        	//3.通过this.props接收
            const {name,age}=this.props
            return (
            <div>
                <ul>
                    <li>姓名：{name}</li>
                    <li>年龄：{age}</li>
                </ul>    
            </div>
         )
        }
    }
    const p={name:"xy",age:21}//1.声明属性
    // 渲染到容器
    //2.绑定到Person标签上
    ReactDOM.render(<Person {...p}/>,document.getElementById("root"))
</script>

1.声明属性
这里声明了一个p对象，内部包含了name、age信息

2.绑定到标签
将p对象绑定到Person标签上，这里用了ES6的扩展运算符
注意： 这里的{}其实是添加js表达式需要的{}，而真正的对象扩展的话是{…p}，但这里经过babel内部处理了，所以不是{{…p}}
当然也可以这样写

ReactDOM.render(<Person name={"xy"} age={21}/>,document.getElementById("root"))

3.this.props接收
前面知道绑定在标签上的属性都会经过处理添加到实例对象的props属性上，因此通过this.props在render内可接收

---

传入类型限制

有时我们需要做些限制，像姓名只能传入String类型且是必须传的，年龄只能传入Number类型，这时我们可以借助 prop-types.js 库，相关文件下载

<!-- 属性限制文件 -->
<script src="../js/prop-types.js"></script>

在类组件外给类组件对象设置propTypes

class Person extends React.Component{
    render(){
        const {name,age}=this.props
        return (
        <div>
            <ul>
                <li>姓名：{name}</li>
                <li>年龄：{age}</li>
            </ul>    
        </div>
     )
    }
}
//属性限制
Person.propTypes={
    name:PropTypes.string.isRequired,
    age:PropTypes.number
}
const p={name:"xy",age:21}
// 渲染到容器
ReactDOM.render(<Person {...p}/>,document.getElementById("root"))

propTypes：react的内置属性，用来限制属性类型的
PropTypes：来自于prop-types.js库文件
string、number：限制输入类型
isRequired：必须输入，即这里必须输入name属性

---

默认值

有时没传入的属性我们想给它添加默认值，同理类组件外设置defaultProps

Person.propTypes={
    name:PropTypes.string.isRequired,
    age:PropTypes.number
}
//设置默认值
Person.defaultProps={
    name:"xx",
    age:18
}

---

写入类组件内部

作为类组件的限制类型、默认值当然希望能直接写入类组件内部，这样才能体现组件化的思想，所以当然也可以。

通过static 设为组件的静态属性直接添加

class Person extends React.Component{
    render(){
        const {name,age}=this.props
        return (
        <div>
            <ul>
                <li>姓名：{name}</li>
                <li>年龄：{age}</li>
            </ul>    
        </div>
     )
    }
    static propTypes={
         name:PropTypes.string.isRequired,
         age:PropTypes.number
      }
    static defaultProps={
        name:"xx",
         age:18
     }
}

---

函数组件使用props

虽然函数式组件并没有创造实例，但是由于它能接收参数，所以它也可以通过参数的形式接收props，但是类型限制、默认值的话就只能写在外面了，不能写入组件内部

 <script type="text/babel">
        // 创建函数组件
        function Person(props){
            const {name,age}=props
            return (
                <div>
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                    </ul>    
                </div>
             )
        }   
        Person.propTypes={
            name:PropTypes.string.isRequired,
            age:PropTypes.number
        }
        Person.defaultProps={
            name:"xx",
            age:18
        }
        // const p={name:"xy",age:21}
        // 渲染到容器
        const p={}
        ReactDOM.render(<Person {...p}/>,document.getElementById("root"))
    </script>