使用PropTypes进行类型检测

PropTypes 是react提供的用于检验数据类型的typechecking,避免应用越来越大的时候出现意料之外的bug

class Greeting extends React.Component {
    render() {
        return (
            <h1>Hello {this.props.name}</h1>
        )
    };
}
Greeting.propTypes = {
    name: React.PropTypes.string.isRequired
};

使用方法如上,作用是检测该组件的使用者是否给name传入的值是字符串,并且该属性必填。

另外,可以通过枚举的方式来给属性指定几个特定的值

optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),

指定optionalEnum属性只能是 News、Photos这两个值

同时可以给属性指定多个类型

optionalUnion: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(Message)
  ]),

也可以指定为由某种特定类型组成的对象

  // 某种类型的数组
  optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

  // 具有某种类型的属性值的对象
  optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

设置默认的属性值

// 如果name没有传值,则会将name设置为默认的zhangyatao
Greeting.defaultProps = {
    name: 'zhangyatao'
}

当没有传入name这个属性的时候,name默认为zhangyatao

原文地址:https://www.cnblogs.com/kugeliu/p/7339077.html