React-数据类型的检测PropTypes

一、数据检测的基本类型

Obj.propTypes = {
     optionalArray: PropTypes.array,//检测数组类型
     optionalBool: PropTypes.bool,//检测布尔类型
     optionalFunc: PropTypes.func,//检测函数（Function类型）
     optionalNumber: PropTypes.number,//检测数字
     optionalObject: PropTypes.object,//检测对象
     optionalString: PropTypes.string,//检测字符串
     optionalSymbol: PropTypes.symbol,//ES6新增的symbol类型
}

二、通过oneOfType实现多选择检测-可规定多个检测通过的数据类型

PropTypes里的oneOfType方法可以做到这一点，oneOfType方法接收参数的是一个数组，数组元素是你希望检测通过的数据类型。

Son.propTypes = {
	name.oneOfType([PropTypes.string,PropTypes.number])
}

<Son
	name="1111"
/>
<Son
	name=1111
/>

三、通过oneOf实现多选择检测-可规定多个检测通过的变量的值

和PropTypes方法一样oneOf方法接收参数的是一个数组，数组元素是你希望检测通过的变量的值

Son.propTypes = {
    name:PropTypes.oneOf([12,13])
}

<Son name="1111" /> // 报错
<Son name=11 /> // 报错
<Son name=12 /> // 正确

四、通过 arrayOf，objectOf 实现多重嵌套检测

arrayOf接收一个参数，这个参数是规定的数组元素的数据类型.
objectOf接收的参数则是属性的数据类型

Son.propTypes = {
     array:PropTypes.arrayOf(PropTypes.number)
}

<Son array = {[1,2,3,4]}/>

五、通过形状方法检测目标对象不同属性的不同数据类型

当它内部的属性的数据类型有多种不同类型的属性了，那么就应该使用形状方法

Son.propTypes = {
     object:PropTypes.shape({
	     name:PropTypes.string,
	     age:PropTypes.number
	   })
}

<Son object = {{name:'111',age:11}} />

六、通过isRequired检测道具中某个必要的属性

Son.propTypes = {
     name:PropTypes.name,isRequired
}

<Son /> // 报错
<Son name=11 /> // 正确

但如果你不想控制数的类型而仅仅是想控制它的必要性,可以写成这样
name：PropTypes.any.isRequired

七、复杂的类型检测 - 将PropTypes的属性值写成函数

Son.propTypes = {
      prop:function(props,propName,componentName){
          if(/*判断条件*/){
               return new Error(/*错误的参数*/)
           }
    }
}

在属性prop的类型检测中，属性值是一个函数，在这里props是包含prop的props对象，propName是prop的属性名，componentName是props所在的组件名称，函数的返回值是一个Error对象

Son.propTypes = {
     email:function(props,propName,componentName){
            if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(props[propName])){
                  return new Error('组件' + componentName+ '里的属性' + propName + '不符合邮箱的格式');
                         }
                }
}
<Son email = {2314838004}/>

八、注意事项

1. 五种基本类型中的不确定和空并不在此列，propTypes类型检测的缺憾之一是，对于不确定的和无效的值，它无法捕捉错误.也就是说,如果传的值是null,那么是不会报错的
2. 虽然报错但是这并不会影响程序的正常运行（譬如上面我们看到渲染仍然是正常的），因为本质上说类型检测报的是非致命性错误的警告而不是致命性错误的错误（区别在于是否影响了正常运行）