PropTypes和defaultPropTypes

一、用途

用于子组件检测props的数据类型是否正确，给props中的属性添加类型约束，如果不对，会抛出警告

二、使用步骤

• 首先，需要导如模块

import PropTypes from 'prop-types'

• 使用格式 （在class外使用）

TodoItem.propTypes = {

}
// 默认类型
TodoItem.defaultProps = {
    
}

其中TodoItem是一个组件名（可以换成其他需要检测的组件），然后在propTypes、defaultProps对象中添加属性和数据类型进行约束

三、使用案例

• 简单约束类型

TodoItem.propTypes = {
    content: PropTypes.string, // content要是string类型
    deleteList: PropTypes.func // deleteList要是函数
}

类型列表：
func、any(任何类型)、bool、array、number、object、string、symbol node、element（React element）

• 在类型的基础上添加约束

TodoItem.propTypes = {
    content: PropTypes.string.isRequested, // content要是string类型，且必须传递
    deleteList: PropTypes.func // deleteList要是函数
}

也可以使用一些方法完成一些逻辑选择

instanceOf(oneClass) ： oneClass的实例
oneOf(['News', 'Photos']) ： 值是[]中列举的其中之一
oneOfType([
    PropTypes.string,
    PropTypes.number
]) []中的任一种类型
arrayOf(PropTypes.number, ProTypes.func) ： 类型是实参中任一种的数组
objectOf() ： 类型是实参中任一种的对象
shape({
    color: PropType.string,
    fontSize: PropTypes.number
}) ： 对对象的属性整体进行类型的检测

• 检测器
  • 简单检测器

  TodoItem.propTypes = {
    /**
     * props： props对象
     * propsName：属性名
     * componentName组件名
     */
      content:  function(props, propName, componentName){
        if(!/machme/.test(props[propName])){
          return new Error(
              // 这里不能使用console warn等，它们不再oneOfType中执行
              'Invalid prop `' + propName + '` supplied to' +
              ' `' + componentName + '`. Validation failed.'
          )
        }
      } 
    }
  

  • 遍历检测器（用于arrayOf和objectOf）

  TodoItem.propTypes = {
   /**
    * 验证Array或Object中每一个值或属性
    * propValue: Array或Object本身
    * key: 下标或键
    * componentName: 组件名词
    * location:
    * proFullName:
  */
     content:  PropTypes.arrayOf(function(propValue, key, componentName, location,       propFullName) {
         if (!/matchme/.test(propValue[key])) {
             return new Error(
                 'Invalid prop `' + propFullName + '` supplied to' +
                 ' `' + componentName + '`. Validation failed.' + location
             );
         }
     })
   }