React组件props校验

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   //当我把传来的数据定义为数字类型时，由于前面传的是数组，因此就会报错
}

意思就是本来预期提供过来的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