非typescript环境下,当我们在封装组件的时候,接受props时传入的内容,需要做类型检测,那我们可以用props校验进行类型的检查。
props校验允许在创建组件的时候,就约定props的格式、类型等
实现步骤:
-
导入
prop-types
包 -
使用
组件名.propTypes = {}
来给组件的props添加校验规则 -
校验规则通过
PropTypes
对象来指定 -
如果props想设置默认值,可以通过
defaultProps
去设置- 常见类型:array、bool、func、number、object、string
- React元素类型:element
- 必填项:isRequired
- 特定结构的对象:shape({})
import PropTypes from 'prop-types'
function App(props) {return (<h1>{props.colors}</h1><h1>{props.num}</h1><h1>{props.name}</h1>)
}
// 这里约定了属性时什么类型,不然类型检测不通过,会清晰报错
App.propTypes = {colors: PropTypes.array,num:PropTypes.number,name:PropTypes.string,
}// 设置默认值
App.defaultProps = {colors: ['蓝色'],nun:18,name:'hyy'
}
###React—— 类的-static 校验简写上面的校验
ES6新出的class可以帮组我们进行类型校验,我们可以定义一个类,给定其类型即默认值。
-
实例成员: 通过实例调用的属性或者方法叫做实例成员(属性或者方法)
-
静态成员:通过类或者构造函数本身才能访问的属性或者方法
static可以把实例成员设置未静态成员
static的作用:简写校验、简写默认值
import PropTypes from 'prop-types'
function App(props) {return (<h1>{props.colors}</h1><h1>{props.num}</h1><h1>{props.name}</h1>)// 这里约定了属性时什么类型,不然类型检测不通过,会清晰报错
static propTypes = {colors: PropTypes.array,num:PropTypes.number,name:PropTypes.string,
}// 设置默认值
static defaultProps = {colors: ['蓝色'],nun:18,name:'hyy'
}
}