props 验证
作用:验证父组件通过属性传递过来的数据的数据类型
-
import PropTypes from 'prop-types'
-
如何验证:要在组件的 props 上进行类型检查,你只需配置特定的
propTypes
属性:// 子组件 class One extends Component { // 属性验证写法二: static propTypes = { num:PropTypes.number } } // 属性验证写法一: // One.propTypes = { // num:PropTypes.number // } // 父组件 export default class Two extends Component { render(){ return <One num={1}></One> } }
-
单个条件
static propTypes = { num:PropTypes.number }
-
多个条件
static propTypes = { num:PropTypes.oneOfType([ PropTypes.number, PropTypes.string, PropTypes.bool, PropTypes.array, PropTypes.object, PropTypes.func ]) }
-
限制数组里面的元素由某一种元素组成
static propTypes = { num:PropTypes.arrayOf(PropTypes.number) }
-
限制数组里面的元素由某几种类型的元素组成
static propTypes = { num:PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])) }
-
指定一个对象由某一类型的值组成
static propTypes = { num:PropTypes.objectOf(PropTypes.number) }
-
指定对象中的某属性的值由特定的类型组成
static propTypes = { num:PropTypes.shape({ a:PropTypes.number, b:PropTypes.string }) }
-
指定对象中某属性的值由某类型组成
static propTypes = { num:PropTypes.shape({ a:PropTypes.oneOfType([ PropTypes.number,PropTypes.string, PropTypes.func]), b:PropTypes.string }) }
-
对象中某属性值不能为空
static propTypes = { num:PropTypes.shape({ id:PropTypes.number.isRequired }) }
-
枚举,指定是某个值
static propTypes = { num:PropTypes.oneOf([1, 2]).isRequired }
-