本文已参与[新人创作礼]活动，一起开启掘金创作之路

一.目的：

校验接收的props的数据类型，增加组件的健壮性

对于组件来说，props是外来的，无法保证组件使用者传入什么格式的数据

如果传入的数据格式不对，可能会导致组件内部报错。组件的使用者不能很明确的知道错误的原因。

props校验允许在创建组件的时候，就约定props的格式、类型等

二.使用

1.下包

yarn add prop-types

2.父传值

import React from 'react'
import Son3 from './props/son3'
class Com extends React.Component {
  state={
    pp2:'',
    pp3:'',
    pp4:'',
    pp5:0,
  }
  render() {
    return (
    <div>
      <Son3 p1={'1'}
       p2={this.state.pp2}
       p3={this.state.pp3}
       p4={this.state.pp4}
       p5={this.state.pp5}
      ></Son3>
  </div>
    )
  }
}
export default Com

3.使用组件名.propTypes = {} 来给组件的props添加校验规则,并通过 PropTypes 对象来指定

常见类型：array、bool、func、number、object、string
默认值：defaultProps
必填项：isRequired
特定结构的对象：shape({})

(1)常见类型

import React from 'react'
import PropTypes from 'prop-types'
class Com extends React.Component {
  render() {
    return <div>
      <span>=={this.props.p1}==
      {this.props.p2}==
      {this.props.p3}==
      {this.props.p4}==
      {this.props.p5}==</span>
    </div>
  }
}
Com.propTypes={
  p1:PropTypes.func,
  p2:PropTypes.array,
  p3:PropTypes.number,
  p4:PropTypes.bool,
  p5:PropTypes.string,
}
export default Com

报错

看这整整齐齐的报错，是不是爽的飞起

处理起来也很容易，按规则传即可

  state={
    pp2:[], 
    pp3:0,
    pp4:false,
    pp5:'',
  } 
  ...
   <Son3 p1={()=>{}}
  ...

(2)默认值：defaultProps

上面常规类型传值其实不传也不会报错，为了解决该问题可设置默认值来解决不传问题

Com.defaultProps={
      pp2:[], 
    pp3:0,
    pp4:false,
    pp5:''
}

(3)必填项：isRequired

上面常规类型传值其实不传也不会报错，可使用必填项isRequired，设置的值不填就报错

Com.propTypes={
  p5:PropTypes.string.isRequired,
}

(4)指定对象

子
Com.propTypes={
    p6:PropTypes.shape({
    color:PropTypes.number
  })
}
父
  state={
    pp6:'',
  } 
  ...
      <Son3 
       p6={this.state.pp6}
      ></Son3>

props校验