深度讲解React Props

一、props的介绍

当React遇到的元素是用户自定义的组件，它会将JSX属性作为单个对象传递给该组件，这个对象称之为“props”。

函数声明的组件，会接受一个props形参，获取属性传递的参数

function ComponentA(props) {
    
    return <div>我是组件B:{
   props.value}</div>
}
1
2
3
4
5

如果函数组件需要props功能，一定不能缺少该形参
类的声明,在react组建中,使用constructor 获取Component类的props属性当组件继承了父类props后，就可以通过this.props属性名进行属性传值

class ComponentB extends React.Component {
   
    constructor(props) {
   
        super(props);
    }
    render() {
   
        return <div>我是组件B {
   this.props.name}</div>
    }
}
1
2
3
4
5
6
7
8
9
10
11
12

类的继承子类必须在constructor方法中调用super方法，否则新建实例时会报错。

这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法,然后再对其进行加工,加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。

注意: props可以传递任何数据类型,并且props是只读的(单项数据流),所有的React组件必须像纯函数那样使用它们的props。

二、批量传递props

情景： 有时我们要传递的参数不止一个的话，那如果是每个都写，10个也许你能接受，那100个，1000个呢。那你的代码简直神了。

既然如此，我们就借用ES6中的展开运算符(…)，就是三个点这玩意。

我们直接先定义好传递的参数，然后再传递。

class Person extends React.Component {
   
    render() {
   
        console.log(this);  // Person 实例对象

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

// 单个传递
ReactDOM.render(<Person name="Tom" age="18" sex="woman" />, document.getElementById('test'))
ReactDOM.render(<Person name="Jack" age="19" sex="man" />, document.getElementById('test1'))

// 批量传递
const p = {
    name: '老王', age: 30, sex: 'man' }
ReactDOM.render(<Person {
   ...p}/>, document.getElementById('test2'))
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
27
28
29
30

三、props的验证

随着应用日渐庞大，通常你希望每个 props 都有指定的值类型,并可以通过类型检查捕获大量错误,便捷开发减少异常维护时间，要检查组件的props属性，你需要配置组件特殊的静态 propTypes 属性并配合prop-types 三方库实现prop验证。(prop-types 在react脚手架中自带无需下载)

在16版本之前的方式

ComponentA.propTypes =