react prop-types插件

1：首先安装 插件包 npm install prop-types
import PropTypes from 'prop-types';
然后通过以下写法对你的某一个组件的props中的变量进行类型检测

yourComponent.propTypes = {
    属性1：属性1的变量类型，
    属性2：属性2的变量类型
    //...

例子：
  static propTypes = {
    maxNum: PropTypes.number, // 最多可上传的图片数量
    fileList: PropTypes.array, // 上传文件列表，如果有已上传图片，可设置初始值
    successCallback: PropTypes.func, // 上传成功回调，可用来更新表单值
    onRemove: PropTypes.func, // 删除图片回调，可用来更新表单值
  };

如果传递的数据类型出错，会有下面的提示。
**这种“人为控制”的报错比一般的系统报错看起来应该要亲切自然得多吧...

propTypes 能用来检测全部数据类型的变量，包括基本类型的的string，boolean,number,以及引用类型的object,array,function,甚至还有ES6新增的symbol类型

propTypes 能用来检测全部数据类型的变量，包括基本类型的的string，boolean,number,以及引用类型的object,array,function,甚至还有ES6新增的symbol类型

Son.propTypes = {
     optionalArray: PropTypes.array,//检测数组类型
     optionalBool: PropTypes.bool,//检测布尔类型
     optionalFunc: PropTypes.func,//检测函数（Function类型）
     optionalNumber: PropTypes.number,//检测数字
     optionalObject: PropTypes.object,//检测对象
     optionalString: PropTypes.string,//检测字符串
     optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型
}

【注意】下面这些是从官方英文文档里引用过来的，你大概能够注意到，五种基本类型中的undefined和null并不在此列，propTypes类型检测的缺憾之一是，对于undefined和null的值，它无法捕捉错误

class Father extends React.Component{
    render(){
       return (<Son
                 number = {null}
                 array = {null}
                 boolean = {null}
                />)
             }
}

结果是输出台不报任何错误，（当然你改成undefined也是同样效果）。

二：通过oneOfType实现多选择检测——可规定多个检测通过的数据类型

上个例子中类型检测的要求是一个变量对应一个数据类型，也就是规定的变量类型只有一个。那么怎样能让它变得灵活一些，比如规定多个可选的数据类型都为检测通过呢？PropTypes里的oneOfType方法可以做到这一点，oneOfType方法接收参数的是一个数组，数组元素是你希望检测通过的数据类型。

import React from 'react'
import PropTypes from 'prop-types';
class Son extends React.Component{
   render(){
     return (<div style ={{padding:30}}>
                    {this.props.number}
                 </div>)
              }
}
Son.propTypes = {
       number:PropTypes.oneOfType(
           [PropTypes.string,PropTypes.number]
         )
}
class Father extends React.Component{
    render(){
         //分别渲染数字的11和字符串的11
        return (<div>
                      <Son number = {'字符串11'}/>
                      <Son number = {11}/>
                    </div>)
                }
}

这时候，因为在类型检测中，number属性的规定类型包括字符串和数字两种，所以此时控制台无报错