属性规则校验

调用组件，传递进来的属性是“只读”的「原理：props 对象被冻结了」 Object.isFrozen(props) -> true 获取：props.xxx 修改：props.xxx=xxx =>报错
作用：父组件 (index.jsx) 调用子组件 (DemoOne.jsx) 的时候，可以基于属性，把不同的信息传递给子组件；子组件接收相应的属性值，呈现出不同的效果，让组件的复用性更强！！
虽然对于传递进来的属性，我们不能直接修改，但是可以做一些规则校验
- 设置默认值
jsx
```
  函数组件.defaultProps = {
    x: 0,
    ......
  };
```
1
2
3
4
设置其它规则，例如：数据值格式、是否必传。.. 「依赖于官方的一个插件：prop-types」

jsx

// https://github.com/facebook/prop-types
import PropTypes from 'prop-types';
函数组件.propTypes = {
    // 类型是字符串、必传
    title: PropTypes.string.isRequired,
    // 类型是数字
    x: PropTypes.number,
    // 多种校验规则中的一个
    y: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.bool,
    ])
};

1
2
3
4
5
6
7
8
9
10
11
12
13

例子

jsx

import PropTypes from 'prop-types';

const DemoOne = function DemoOne(props) {
    let { title } = props;
    let x = props.x;
    x = 1000;

    return <div className="demo-box">
        <h2 className="title">{title}</h2>
        <span>{x}</span>
    </div>;
};
/* 通过把函数当做对象，设置静态的私有属性方法，来给其设置属性的校验规则 */
DemoOne.defaultProps = {
    x: 0
};
DemoOne.propTypes = {
    title: PropTypes.string.isRequired,
    x: PropTypes.number,
    y: PropTypes.oneOfType([
        PropTypes.number,
        PropTypes.bool,
    ])
};

export default DemoOne;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

传递进来的属性，首先会经历规则的校验，不管校验成功还是失败，最后都会把属性给形参 props，只不过如果不符合设定的规则，控制台会抛出警告错误{不影响属性值的获取}！！

如果就想把传递的属性值进行修改，我们可以：
- 把 props 中的某个属性赋值给其他内容「例如：变量、状态。..」
- 我们不直接操作 props.xxx=xxx，但是我们可以修改变量 / 状态值！！

属性规则校验 #

例子 #

属性规则校验

例子