React组件使用PropTypes 进行类型检查

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])
}

更多请参考React官网高级指引