Typechecking With PropTypes

注意 ： React.PropTypes从React v15.5开始迁移到不同的包中，请使用prop-types库。我们提供一个codemod脚本来自动化转换

随着应用的增长，你可以通过类型检查来捕获大量的bug。

对于一些应用来说，你可以使用如Flow和TypeScript等JavaScript扩展来进行全局的应用类型检查。但是即使你不使用他们，React也有一些内置的类型检查功能。

如果需要在组件的props上进行类型检查，可以通过赋值特殊的propTypes进行：

  1. import PropTypes from 'prop-types';
  3. class Greeting extends React.Component {
  4.   render() {
  5.     return (
  6.       <h1>Hello, {this.props.name}</h1>
  7.     );
  8.   }
  9. }
  11. Greeting.propTypes = {
  12.   name: PropTypes.string
  13. };

PropTypes导出的是一系列验证器用于验证接收到的数据是否是可用的。上述例子中，我们使用了PropTypes.string.

如果接收了一个无效的prop，JavaScript控制台(console)会出现警告。出于性能原因，仅在开发模式下检查propTypes。

PropTypes

下面是一些不同的验证器的示例：

  1. import PropTypes from 'prop-types';
  2. import React,{Component} from 'react';
  4. class MyComponent extends Component{};
  5. MyComponent.propTypes = {
  6.   // 声明的prop可以是一个特殊的JS基础变量，默认情况下，下面都是可选的
  7.   optionalArray: PropTypes.array,
  8.   optionalBool: PropTypes.bool,
  9.   optionalFunc: PropTypes.func,
  10.   optionalNumber: PropTypes.number,
  11.   optionalObject: PropTypes.object,
  12.   optionalString: PropTypes.string,
  13.   optionalSymbol: PropTypes.symbol,
  15.   // 下面示例能够渲染任何元素: numbers, strings, elements ，array, fragment
  16.   optionalNode: PropTypes.node,
  18.   // 需要是 React 元素
  19.   optionalElement: PropTypes.element,
  21.   // 可以声明 prop 是某个类的示例
  22.   optionalMessage: PropTypes.instanceOf(Message),
  24.   // 可以声明 prop 在某个 enum 中的一个
  25.   optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  27.   // 用来验证prop对象中的每一个属性
  28.   optionalUnion: PropTypes.oneOfType([
  29.     PropTypes.string,
  30.     PropTypes.number,
  31.     PropTypes.instanceOf(Message)
  32.   ]),
  34.   // 验证 prop 数组的每个子元素的类型
  35.   optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  37.   // 检查 prop 对象的属性的类型
  38.   optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  40.   // 用来检查 prop 对象的每个属性的类型
  41.   optionalObjectWithShape: PropTypes.shape({
  42.     color: PropTypes.string,
  43.     fontSize: PropTypes.number
  44.   }),
  46.   // 检查 prop 是必须存在的（required）
  47.   requiredFunc: PropTypes.func.isRequired,
  49.   // 用来检查任意的数值都必须存在
  50.   requiredAny: PropTypes.any.isRequired,
  52.   // 你可以通过自定义验证器的方法来进行验证。
  53.   // 自定义验证器应当返回一个抛出错误的Error对象。
  54.   // 不要使用`console.warn`或者throw抛出错误，因为无法再 oneOfType 中使用
  55.   customProp: function(props, propName, componentName) {
  56.     if (!/matchme/.test(props[propName])) {
  57.       return new Error(
  58.         'Invalid prop `' + propName + '` supplied to' +
  59.         ' `' + componentName + '`. Validation failed.'
  60.       );
  61.     }
  62.   },
  64.   // 你也可以为'arrayOf'和'objectOf'提供自定义验证器
  65.   // 如果验证失败，应该返回一个Error对象
  66.   // 数组或者对象的每一个key都会被调用这个验证器。
  67.   // 此验证器的前面两个参数是数组或者是对象本身以及当前遍历的index(如数组下标或对象属性key)
  68.   customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
  69.     if (!/matchme/.test(propValue[key])) {
  70.       return new Error(
  71.         'Invalid prop `' + propFullName + '` supplied to' +
  72.         ' `' + componentName + '`. Validation failed.'
  73.       );
  74.     }
  75.   })
  76. };

检查单Children的类型

通过PropTypes.element，可以用来验证一个单children的类型：

  1. import PropTypes from 'prop-types';
  3. class MyComponent extends React.Component {
  4.   render() {
  5.     // This must be exactly one element or it will warn.
  6.     const children = this.props.children;
  7.     return (
  8.       <div>
  9.         {children}
  10.       </div>
  11.     );
  12.   }
  13. }
  15. MyComponent.propTypes = {
  16.   children: PropTypes.element.isRequired
  17. };

Prop 默认值

你可以通过defaultProps来为props定义默认值：

  1. class Greeting extends React.Component {
  2.   render() {
  3.     return (
  4.       <h1>Hello, {this.props.name}</h1>
  5.     );
  6.   }
  7. }
  9. // Specifies the default values for props:
  10. Greeting.defaultProps = {
  11.   name: 'Stranger'
  12. };
  14. // Renders "Hello, Stranger":
  15. ReactDOM.render(
  16.   <Greeting />,
  17.   document.getElementById('example')
  18. );

如果父组件没有指定props，则defaultProps能够指定一个默认的this.props.name.

当然，即使指定了defaultProps，propTypes的类型检查也会作用于defaultProps.