react中prop-types的使用

什么是prop-types？prop代表父组件传递过来的值，types代表类型。简单来说就是用来校验父组件传递过来值的类型

首先你需要通过在终端npm/yarn install/add prop-types安装一个叫prop-types的第三方包

import PropTypes from 'prop-types';
TodoItem.propTypes = {
    test: PropTypes.string.isRequired,   //加上isRequired以后，即使父组件没传递值也会抛出警告
}

import PropTypes from 'prop-types';
TodoItem.propTypes = {
    test: PropTypes.arrayOf(PropTypes.string, PropTypes.number)   //可以设置多个类型
　　 test: PropTypes.oneOfType([PropTypes.string, PropTypes.number])   //符合任意一个类型即可
}

 

那么如何解决父组件没传递值也会抛出的警告呢？可以使用react里的defaultProps来设置默认的props值

TodoItem.defaultProps = {
  test: 'hello word'  
}

Son.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类型
}

注意：

五种基本类型中的不确定和空并不在此列，propTypes类型检测的缺憾之一是，对于不确定的和无效的值，它无法捕捉错误，比如传个null

也可以设置自定义的值

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

【注意】在这里给大家提个问题：我们上述的写法是数量：PropTypes.number.isRequired，这要求数是数字类型，但如果你不想控制数的类型而仅仅是想控制它的必要性呢？难道写成号：isRequired或number：PropTypes.isRequired？ 这个时候PropTypes.any就登场啦！它代表了该变量可取任何一种数据类型，所以你可以写成这样--number：PropTypes.any.isRequired

 

应对更复杂的类型检测 - 将PropTypes的属性值写成函数 :

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

 

ES7下类型检测的新写法 (但注意，这在ES7下生效)

class Son extends React.Component{
static propTypes = {
       //..类型检测
}
render(){
   return (/* 渲染*/)
     }