React中的Props类型检查PropTypes

官方提示：从React V15.5，之前的React.PropTypes会在未来版本移除，请使用 prop-types 替代。

随着应用程序的增长，你可以用类型检查找到更多错误。你可以为你的应用使用第三方类型检查库，如：Flow、TypeScript 等。你也可以不使用它们，因为React内嵌了一些类型检查功能。你可以设置组件的指定属性propTypes，为组件添加类型检查的能力。

这是个简单的类型检查的例子：

import PropTypes from 'prop-types';

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

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

PropTypes

这里列出不同的验证器。

import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // JS原始类型，这些全部默认是可选的
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 可以直接渲染的任何东西，可以是数字、字符串、元素或数组
  optionalNode: PropTypes.node,

  // React元素
  optionalElement: PropTypes.element,

  // 指定是某个类的实例
  optionalMessage: PropTypes.instanceOf(Message),

  // 可以是多个值中的一个
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),

  // 可以是多种类型中的一个
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

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

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

  // 具有相同属性值的对象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // 必选条件，可以配合其他验证器，以确保在没有提供属性的情况下发出警告
  requiredFunc: PropTypes.func.isRequired,

  // 必选条件，提供的属性可以为任意类型
  requiredAny: PropTypes.any.isRequired,

  // 自定义‘oneOfType’验证器。如果提供的属性值不匹配的它应该抛出一个异常
  // 注意：不能使用‘console.warn’ 和 throw
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },

  // 自定义‘arrayOf’或者‘objectOf’验证器。
  // 它会调用每个数组或者对象的key，参数前两个是对象它本身和当前key
  // 注意：不能使用‘console.warn’ 和 throw
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
};

Single Child组件

使用PropTypes.element你可以指定你的组件必须要有一个children，而且只能有一个。

import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // 它必须是个React元素，否则会报错
    const children = this.props.children;
    return (
      <div>
        {children}
      </div>
    );
  }
}

MyComponent.propTypes = {
  children: PropTypes.element.isRequired
};

defaultProps中的值

设置组件的defaultProps属性，可以为props指定默认值：

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

// 为props指定默认值:
Greeting.defaultProps = {
  name: 'Stranger'
};

// 渲染 "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

defaultProps用于确保this.props.name有一个值，如果上级组件没有指定的话。props类型检查会发生在defaultProps解析之后，所以类型检查也适用于defaultProps。