propTypes类型检测

propTypes：类型检测

一、安装

npm install prop-types 安装 prop-types 第三方包

二、使用

通过以下方法对你的某一个组件的变量进行类型检测

yourComponent.propTypes = {
  属性1: 属性1的变量类型,
  属性2: 属性2的变量类型,
  ...
}

检测全部数据类型变量：

import React from 'react'
import PropTypes from 'prop-types';
class Son extends React.Component{
   render(){
     return (
         <div style ={{padding:30}}>
           {this.props.number} <br/>
           {this.props.array} <br/>
           {this.props.boolean.toString()}
         </div>
      )
   }
}

Son.propTypes = { // 类型检测
   number:PropTypes.number,
   array:PropTypes.array,
   boolean:PropTypes.bool
}

class Father extends React.Component{
    render(){
      return (
         <Son
            number = {'1'}
            array = {'[1,2,3]'}
            boolean = {'true'}
         />
      )
    }
}

image.png

二、检测类型

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