Advanced Guide--Typechecking with PropTypes

Posted 2020-08-22 爆炒小黄鸡

React拥有内置的类型检测机制，为组件的props运行类型检测，需要制定propTypes属性：

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

Greeting.propTypes = {
  name: React.PropTypes.string
};

 

React.PropTypes输出一系列的验证器，用以确保你收到的数据是合法的。

 

一、React.PropTypes

下面是一个例子记录了不同的验证器；

MyComponent.propTypes = {
  // 你可以声明一个prop是特定的JS原始数据
  // 默认情况下这些都是可选的
  optionalArray: React.PropTypes.array,
  optionalBool: React.PropTypes.bool,
  optionalFunc: React.PropTypes.func,
  optionalNumber: React.PropTypes.number,
  optionalObject: React.PropTypes.object,
  optionalString: React.PropTypes.string,
  optionalSymbol: React.PropTypes.symbol,

  // 任何可以被渲染的事物：numbers, strings, elements or an array
  // (or fragment) containing these types.
  optionalNode: React.PropTypes.node,

  // A React element.
  optionalElement: React.PropTypes.element,

  // 声明一个prop是某个类的实例，用到了JS的instanceof运算符
  optionalMessage: React.PropTypes.instanceOf(Message),

  // 你可以使用enum来确保你的prop仅限于特定的值
  optionalEnum: React.PropTypes.oneOf([‘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),

  // 一个指定形式的对象
  optionalObjectWithShape: React.PropTypes.shape({
    color: React.PropTypes.string,
    fontSize: React.PropTypes.number
  }),

  // 你可以用以上任何验证器链接‘isRequired’，来确保prop必须有值
  requiredFunc: React.PropTypes.func.isRequired,

  // 一个任何类型的值
  requiredAny: React.PropTypes.any.isRequired,

  // 你也可以自定义验证器，如果验证失败，必须返回一个Error对象
  // 不要使用console.warn或者throw，这些在oneOfType中都没用 
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        ‘Invalid prop `‘ + propName + ‘` supplied to‘ +
        ‘ `‘ + componentName + ‘`. Validation failed.‘
      );
    }
  },

  // 你也可以为arrayOf和objectOf提供一个验证器
  // 如果验证失败，它也应该返回一个Error对象
  // 在array或者object中，验证器对于每个key都会被调用The first two
  // 验证器的前两个arguments是array或者object自身以及当前的key值
  customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        ‘Invalid prop `‘ + propFullName + ‘` supplied to‘ +
        ‘ `‘ + componentName + ‘`. Validation failed.‘
      );
    }
  })
};