react中对props的一些基础限制

1. 通过propTypes跟PropTypes实现对props的类型限制

  //在函数式组建中通过这两种自带的方法实现对props的类型限制
          Person.propTypes = {   //Person类的属性规则
            name: PropTypes.string.isRequired, //具体的规则，注意这个跟上面的propTypes没有任何关联，使用前需引入,isRequired表示必填
            sex: PropTypes.string, //表示性别必须是字符串类型
            age: PropTypes.number, //表示年龄必须是数字类型
            spack: PropTypes.func  //在react中想限制函数的话，需要写func
        }
  //在类式组建中可以用static来实现简写的形式
          class Person extends React.Component {
            static propTypes = {   //你类的属性规则 ,, static相当于直接给类本身添加了属性
                name: PropTypes.string.isRequired,
                sex: PropTypes.string,
                age: PropTypes.number,
                spack: PropTypes.func  
            }
            render() {
                const { name, age, sex } = this.props //利用结构赋值提前拿到值,props是只读的
                return (<div>
                    <ul>
                        <li>姓名：{name}</li>
                        <li>年龄：{age}</li>
                        <li>性别：{sex}</li>
                    </ul>
                </div>
                )
            }
        }

2. 通过defaultProps实现对props的默认值设置

        Person.defaultProps = {//类的默认值可以通过defaultProps设置
            sex: "女", //如果sex没有传值则默认为女
            age: 18   //如果age没有传值则默认为18
        }
        //当然在类式组件中也可以用static来简写