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属性的规定类型包含字符串和数字两种,所以此时控制台无报错