react的类型检查（PropTypes）

类型检查时为了避免像组件中传入不必要的数据类型，从而导致一些不必要的bug。下面是学习PropTypes的时候的一些笔记

声明为js类型

  optionalArray: PropTypes.array,//数组
  optionalBool: PropTypes.bool,//布尔
  optionalFunc: PropTypes.func,//function
  optionalNumber: PropTypes.number,//数字
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

可以声明为任何可以被render的类型

optionalElement: PropTypes.element,

声明为某个类的实例

optionalMessage: PropTypes.instanceOf(Message),

使用枚举限定

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

使用object限定为多种类型

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

某个特定的数组类型

optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

某个特定的Object类型

optionalObjectOf: PropTypes.objectOf(PropTypes.number)

可以使用isRequired来实现上面的所有校验

requiredFunc: PropTypes.func.isRequired,

使用function

可以使用一个function来自定义一个校验器   它应该返回一个Error的object类型的错误当校验失败的时候  如下：

  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

设置默认的props值

使用  组件.defaultProps = {}  的语法来  例如下面:

class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
Greeting.defaultProps = {
  name: 'Stranger'
};