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