React prop-types使用讲解

React.PropTypes在React15.5之后被弃用，prop-types库是以React.PropTypes为基础独立出来的；
prop-types用来记录传递给组件的预期属性类型，React将根据这些定义检查给组件的Props，如果不匹配，则会给开发者发出详细警告（如控制台打印错误信息）；

安装

npm i prop-types -S
yarn add prop-types -S

使用

import React from 'react';
import PropTypes from 'prop-types';

class MyComponent extends React.Component {
  render() {
    // ... do things with the props
  }
}

MyComponent.propTypes = {
    optionalArray: PropTypes.array,
    optionalBigInt: PropTypes.bigint,
    optionalBool: PropTypes.bool,
    optionalFunc: PropTypes.func,
    optionalNumber: PropTypes.number,
    optionalObject: PropTypes.object,
    optionalString: PropTypes.string,
    optionalSymbol: PropTypes.symbol,

    requiredFunc: PropTypes.func.isRequired, // isRequired用于规定该属性为必要属性，即必传属性
    requiredAny: PropTypes.any.isRequired,

    optionalElement: PropTypes.element, // 一个React元素
    optionalElementType: PropTypes.elementType, // 一个React元素类型
    optionalMessage: PropTypes.instanceOf(Message), // 一个类的实例
    
    optionalEnum: PropTypes.oneOf(['News', 'Photos']), // optionalEnum仅限为'News', 'Photos'特定值
    optionalUnion: PropTypes.oneOfType([ // optionalUnion的值类型可谓string、number...
        PropTypes.string,
        PropTypes.number,
        PropTypes.instanceOf(Message)
    ]),
    
    optionalArrayOf: PropTypes.arrayOf(PropTypes.number), // 数组元素类型仅限为number
    optionalObjectOf: PropTypes.objectOf(PropTypes.number), // 对象值类型仅限为number

    optionalObjectWithShape: PropTypes.shape({ // 规定optionalObjectWithShape对象的属性、值的类型
        optionalProperty: PropTypes.string,
        requiredProperty: PropTypes.number.isRequired
    }),
    optionalObjectWithStrictShape: PropTypes.exact({ // 规定optionalObjectWithStrictShape对象的属性、值的类型，并带有额外属性警告
        optionalProperty: PropTypes.string,
        requiredProperty: PropTypes.number.isRequired
    }),
    
    
  customProp: function(props, propName, componentName) { // 自定义验证器，返回一个错误，如：可用于检测邮箱号
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  },
}

注

• propTypes类型检查缺憾之一是：对于undefined、null，无法捕捉其错误

参考原文：
prop-types库