类型校验的必要性
在react中需要效验接受props的数据类型,增强组件的强壮性(主要是eslint一直在报错),对于子组件来说,props是外来的,无法保证组件使用者传入什么格式的数据,有了类型校验,我们的程序就更加健壮了。
使用步骤
- 1导入prop-types包,这个包在脚手架创建的时候就自带了,无须额外的安装.导入命令:import PropTyoes from 'prop-types'
- 使用:组件名.propTypes={属性名1:类型,是否为必须...}来给组件的props添加效验规则这里的propTypes是固定写法
代码示例
import PropTypes from 'prop-types'
class App extends React.component {
render(){
return (
<h1>Hi, {props.colors}</h1>
)
}
}
App.propTypes = {
// 约定colors属性为array类型
// 如果类型不对,则报出明确错误,便于分析错误原因
colors: PropTypes.array
}
props的常见效验规则
- 数据类型:bool.array.func.number.object.string
- React元素的类型:element
- 是否为必填项:isRequired
- 特定结构的对象:shape({})
props默认值
props的默认值有两个方法1.defaultprops 2.结构赋值的默认值
方法一:defaultprops
通过defaultprops可以给组件赋值,在未传入props 的时候生效
代码示例
App.defaultprops={
属性名:默认值
}
方法二:结构赋值方法
通过结构赋值设置默认值
代码示例
const {a,b,c=10}={a:1,b:2}
//这个是时候没有c,所以c的默认值是10
props效验的简化--static(类的静态成员)
目标
了解静态属性的概念和特点,能用它来简化props校验和默认值
静态成员的定义和访问
class Person {
constructor(name){
this.name = name // 实例成员
}
// 方法1:在class内部 通过static来定义
static n = 1 // 静态成员 有static修饰
}
// 方法2 在class外部 通过类型.属性名来定义
Person.m = function() { console.log()}
访问
Person.n
Person.m()