React PropTypes 定义组件的属性类型和默认属性

新增:

在React 16版本之后, PropTypes 从react包 换到了prop-types 包中,所以想要使用PropTypes 需要这样:

yarn add prop-types

在需要引入的地方使用:

import PropTypes from 'prop-types';

我们在定义组件的时候，通常会给它传属性，比如作为FlatList,Listview的item或者要导入到其他位置的时候，都需要给这个item组件传递值，有的时候，可能我们传值会的值没有定义，打个比方：

<FlatList
    style={{backgroundColor:'#999999',width:250}}
    data={[{name: 'a',age:11}, {name: 'b'},{}]}
    renderItem={({item}) => <Item name={item.name} age={item.age}/>} />

我们有一个显示人的姓名和年龄的List列表，

上面我们可以看到，第二个对象没有age，第三个对象什么都没有。

如果子组件直接用的话，第二行 的age那里就是空的，第三行都是空的。

看一下子组件的代码：

export default class Item extends React.PureComponent {

    static defaultProps = {
        name: 'item',
        age:18
    };

    static propTypes = {
        name:PropTypes.string.isRequired,
        age:PropTypes.number.isRequired,
    };

    render() {
        let {name,age} = this.props;
        return (
            <View style={{flexDirection:'row'}}>
                <Text>name:{name} , </Text>
                <Text>age:{age}</Text>
            </View>
        )
    }
}

第一个方法：defaultProps

给对象设置默认属性，如果传来的对象没有对应值，则把这里的属性赋值给该对象。

第二个方法：propTypes

设置props的类型，如上：name规定为string类型，isRequeired是说明该值不能为空，必须传递

如果为空，会有个提示，当然，这个提示在debug模式才会有 方便开发

如果没有第一个方法，那么不传会有错误提示，有的话会直接赋值给空对象。

设置了这两个，就不会有空值了。

另外需要注意的是 如果没有使用defaultProps , 那么调用子组件时 ,如果没有传递对应属性,又没有用isrequired来限制,比如 :  name为null或者为undefined 是不会报警告的.

注意为了性能考虑，只在开发环境验证 propTypes。