React 属性验证

props 验证

作用：验证父组件通过属性传递过来的数据的数据类型

1. 导入 prop-types

   import PropTypes from 'prop-types'

2. 如何验证：要在组件的 props 上进行类型检查，你只需配置特定的 propTypes 属性：

   // 子组件
   class One extends Component {
       // 属性验证写法二：
       static propTypes = {
           num:PropTypes.number
       }
   }
   ​
   // 属性验证写法一：
   // One.propTypes = {
   //     num:PropTypes.number
   // }
   ​
    
   // 父组件
   export default class Two extends Component {
       render(){
           return <One num={1}></One>
       }
   }

   • 单个条件

     static propTypes = {
         num:PropTypes.number
     }

      

   • 多个条件

     static propTypes = {
         num:PropTypes.oneOfType([
             PropTypes.number, 
             PropTypes.string,
             PropTypes.bool,
             PropTypes.array,
             PropTypes.object,
             PropTypes.func
         ])
     }

   • 限制数组里面的元素由某一种元素组成

     static propTypes = {
         num:PropTypes.arrayOf(PropTypes.number)
     }

      

   • 限制数组里面的元素由某几种类型的元素组成

     static propTypes = {
        num:PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string]))
     }

      

   • 指定一个对象由某一类型的值组成

     static propTypes = {
         num:PropTypes.objectOf(PropTypes.number)
     }

      

   • 指定对象中的某属性的值由特定的类型组成

     static propTypes = {
         num:PropTypes.shape({
             a:PropTypes.number,
             b:PropTypes.string
         })
     }

      

   • 指定对象中某属性的值由某类型组成

     static propTypes = {
         num:PropTypes.shape({
             a:PropTypes.oneOfType([ PropTypes.number,PropTypes.string, PropTypes.func]),
             b:PropTypes.string
         })
     }

      

   • 对象中某属性值不能为空

     static propTypes = {
         num:PropTypes.shape({
             id:PropTypes.number.isRequired
         })
     }

      

   • 枚举,指定是某个值

     static propTypes = {
         num:PropTypes.oneOf([1, 2]).isRequired
     }