之后可以使用flow或TypeScript对整个应用程序做全局检查。
1、安装属性校验包yarn add prop-types
2、导入prop-types包
import PropTypes from 'prop-types'
3、使用
使用场景一:为函数添加propTypes校验
使用组件名.prop-types={}来给组件List的props添加校验规则
为组件添加propTypes,并通过PropTypes对象来指定属性的类型
List.propTypes={
color:PropTypes.array,
gender:PropTypes.oneOf(['male','female']).isRequired
}
使用场景二:为class类添加propTypes校验
class List extends Component{
static propTypes={
color:PropTypes.array,
gender:PropTypes.oneOf(['male','female']).isRequired,
}
render(){
const arr=this.props.color
const lis=arr.map((item,index)=>
<li key={index}>{item.name}</li>
)
return (
<ul>{lis}</ul>
)
}
}
实例、静态的属性和方法
class List {
name = '实例属性'
look = () => {
console.log('实例方法');
}
static hh = 'static属性'
static see = () => {
console.log('static方法');
}
}
const lis = new List()
// 访问实例属性、调用实例方法
console.log(lis.name);
lis.look()
// 访问静态属性、调用静态方法
console.log(List.hh);
List.see()
prop属性默认值
在接收props的()中写入默认值,例如:{page='99'}