利用prop-types第三方库对组件的props中的变量进行类型检测

prop-types基础入门

安装 prop-types

cnpm install prop-types

然后通过下面的写法对你的某一个组件的props中的变量进行类型检测

yourComponent.propTypes = {
    属性1：属性1的变量类型，
    属性2：属性2的变量类型
    //...
}

propTypes的使用全解

DemoComponent.propTypes = {
        number:PropTypes.number,
        array:PropTypes.array,
        boolean:PropTypes.bool
}

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

DemoComponent.propTypes = {
       // 这里指定了num既可以是string类型又可以是number类型
       num:PropTypes.oneOfType(
           [PropTypes.string,PropTypes.number] 
         )
}

DemoComponent.propTypes = {
    // 这里指定了num的值必须是11或13
    num:PropTypes.oneOf(
          [12,13]
      )
}

DemoComponent.propTypes = {
     // 这里指定了array中的每个元素必须是number类型
     array:PropTypes.arrayOf(PropTypes.number)
}

DemoComponent.propTypes = {
    // 这里使用shape方式,指定了object内部的每个属性的实际类型
    obj: PropTypes.shape({
        属性1：类型1，
       属性2：类型2，
       //...
   })
}

DemoComponent.propTypes = {
          // 这里指定了num的类型为number且是必须的
          num:PropTypes.number. isRequired
}

DemoComponent.propTypes = {
          // 这里指定了num的类型是任意类型, 但num是必须的
          num:PropTypes. any. isRequired
}

DemoComponent.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 + '不符合邮箱的格式');
                         }
                }
}

ES7下类型检测的新写法：

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