React组件props校验

àì夳堔傛蜴生んèń 2022-09-05 14:54 270阅读 0赞

## React组件props校验 ##

首先说明以下为什么需要props校验，因为props是接受从父组件传过来得数据（接数据跟传数据不是一个人），但是数据类型没有明确得规定，那么有的时候我需要一个数组，你却给我普通数据，那么最终就会报错

#### 1.首先安装prop-types ####

> `yarn add prop-types` 或者 `npm i prop-types -g`

#### 2.导入prop-types包 ####

import PropTypes from 'prop-types'

#### 3.最后一步使用组件名.propTypes=\{\}给组件添加校验规则 ####

外组件传来得数据 很明显得可以看到传入得props是个数组

render() { 
        return (
          <div>
            我是父亲组件
            { this.props.children}
           <Home colors={ [{ name:'jack'},{ name:'tom'}]} /> 
          </div>
        )
      }

接收的时候使用

import React, {  Component } from 'react'
    import {  globalContext } from '../global'
    import PropType from 'prop-types'
    
    const {  Consumer } = globalContext
    export default class home extends Component { 
      render() { 
        let arr = this.props.colors  //接受数据
        let lis = arr.map((item, index) => {   //便利数据返回jsx
          return <li key={ index}>{ item.name}</li>
        })
        return (
          <div>
            <ul>{ lis}</ul>  //渲染页面 下面的是跨组件传值 愿意了解的博客里有写
            <Consumer>{ value => <button onClick={ value.add}>+1</button>}</Consumer>
            <Consumer>{ value => <button onClick={ value.dice}>*2</button>}</Consumer>
            <Consumer>{ value => value.num}</Consumer>
          </div>
        )
      }
    }
    home.propTypes={ 
      colors: PropType.number   //当我把传来的数据定义为数字类型时，由于前面传的是数组，因此就会报错
    }

![在这里插入图片描述][32864e943b874743be8fecd34ef37892.png]  
意思就是本来预期提供过来的`colors`类型是数字类型 但是传过来的是数组

> 把类型改成array就行了，或者在传过来时就是数字也行`home.propTypes={ colors: PropType.array }`

> 常用约束规则
> 
> >  *  array（数组） bool（布尔）func（方法）number（数字） object（对象） string（字符串） element（元素类型就是标签之类的）isRequired（必填项）例如 colors：PropTypes,string.isRequired 必填项 写法注意一下
> >  *  特定结构的对象：shape(\{\})

home.propTypes = {    //prop类型限定校验
     colors: PropType.array,  //colors必须时数组
     num: PropType.shape({ 	//num:特定结构 特定结构必须含有sum。并且还必须是必填
       sum: PropType.string.isRequired    //如果没有这个属性就会报错
     })
    }

> 大致意思就是sum这个属性必须是必填项 但是我的是undefined  
> ![在这里插入图片描述][2f06af0265124fab9edb9df7fd0a3404.png]

![在这里插入图片描述][43449701d52d466388449c276f4bbada.png]

[32864e943b874743be8fecd34ef37892.png]: /images/20220829/a8d75d9f45fb407683861214a4d9ed18.png
[2f06af0265124fab9edb9df7fd0a3404.png]: /images/20220829/57d6203baa034adcba1bfa086571a4d2.png
[43449701d52d466388449c276f4bbada.png]: /images/20220829/98766938b5174b2687bc1fb1f55ef4d4.png