PropTypes
每个组件的props都接收父组件的参数,我们可以使用PropsTypes来校验父组件传过来的参数是否合法,如果传递的值不合法就控制台就会有明显的警告
使用
首先你需要通过在终端npm install prop-types安装一个叫prop-types的第三方包
//示例:
import PropTypes from 'prop-types';
Children.propTypes = {
name: PropTypes.string,
age: PropTypes.number,
gender: PropTypes.bool.isRequired,
speak:PropTypes.func.isRequired
}
你可以在任何 PropTypes 属性后面加上 isRequired
,确保这个 prop 没有被提供时,会打印警告信息。上面代码说明,在使用Children这个组件的时候必须传入gender和doEat这个两个属性,而且传入gender的类型是一个boolean值,speak是一个函数,name是一个字符串,age是一个数值类型。
默认值
当子组件要求父组件必须向子组件传递这个参数,而父组件没有办法传递时,可以使用使用 DefaultProps 给参数设置默认值
import PropTypes from 'prop-types';
Children.propTypes = {
name: PropTypes.string,
age: PropTypes.number.isRequired,
gender: PropTypes.bool.isRequired,
speak:PropTypes.func.isRequired
}
Children.propTypes = {
age:0
}
这样我们在父组件中使用Children是默认每个Children中的age为0
多个类型
使用PropTypes 设定属性的类型也可以是多类型的,例如ant design组件库中的TextArea组件的autoSize属性你传入的既可以是一个boolean可以是一个对象。
//设置多类型示例
import PropTypes from 'prop-types';
Children.propTypes = {
Think: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}