react 中的PropTypes与DefaultProps

每个组件都有自己的props参数，这参数是从父组件接收的一些属性。那我们应该如何对参数的类型做校验，如何定义参数的默认值呢？

1.使用PropTypes校验父组件传过来的参数是否合法

import PropTypes from 'prop-types';
TodoItem.propTypes = {
    content: PropTypes.string,
    handleItemDelete: PropTypes.func,
    index: PropTypes.number
}

如上面代码所示，先引用 proptypes，再为 TodoItem 组件校验从父组件接收过来的参数。一般开发的时候建议把 PropTypes 写上，这样传值不对的时候，就会有一个明显的警告，不容易遇到坑。

如果在子组件写了一个父组件传值中没有的参数，代码不会报任何错误，只不过参数没有接收，不会显示而已。对于没有传递过来的参数，子组件是不会进行校验的，但如果这个参数是必要的，我们可以进行强制校验

    test: PropTypes.string.isRequired

isRequired 表示父组件必须要向子组件传递。

2. 使用 DefaultProps 给参数设置默认值

如果子组件要求父组件必须向子组件传递这个参数，但父组件没办法传递这个参数，可以给这个参数设置一个默认值。

import PropTypes from 'prop-types';
TodoItem.propTypes = {
    content: PropTypes.string,
    handleItemDelete: PropTypes.func,
    index: PropTypes.number,
    test: PropTypes.string.isRequired
}
TodoItem.defaultProps = {
    test: 'hello~'
}

3. 如果要求这个参数不仅可以是 string 类型， 也可以是 number 类型

import PropTypes from 'prop-types';
TodoItem.propTypes = {
    test: PropTypes.oneOfType([PropTypes.string, PropTypes.number])
}

arrayOf表示test是一个数组，数组里面的内容可以是string，也可以是number

import PropTypes from 'prop-types';
TodoItem.propTypes = {
    test: PropTypes.arrayOf(PropTypes.string, PropTypes.number)
}