React 校验库 prop-types 安装与详细使用

$ yarn add prop-types

$ npm i prop-types -D

import PropTypes from 'prop-types';

组件名.PropTypes = {
    组件属性：校验格式,
    list：PropTypes.array
}

import React from "react";
import PropTypes from 'prop-types';
function Sub (props) {
  return (
    <div>子组件</div>
  )
}
class App extends React.Component {
  render () {
    return (
      <div>
        {/* 传入的不是数组，会报错 */}
        <Sub list={2}></Sub>
      </div>
    )
  }
}
// 给组件 Sub 的属性定义校验规则
Sub.propTypes = {
  // 指定 list 数据必须为数组
  list: PropTypes.array
}
export default App

import React from "react";
import PropTypes from 'prop-types';
function Sub (props) {
  return (
    <>
      <div>子组件</div>
      { props.list.map((item, index) => <p key={index}>{item}</p>) }
    </>
  )
}
class App extends React.Component {
  render () {
    return (
      <div>
        {/* 传入的不是数组，会报错 */}
        <Sub list={[1, 2, 3]}></Sub>
      </div>
    )
  }
}
// 给组件 Sub 的属性定义校验规则
Sub.propTypes = {
  // 指定 list 数据必须为数组
  list: PropTypes.array
}
export default App

MyComponent.propTypes = {
  // 可以声明 prop 为指定的 JS 基本数据类型，默认情况，这些数据是可选的
  myPropArray: React.PropTypes.array,
  myPropBool: React.PropTypes.bool,
  myPropFunc: React.PropTypes.func,
  myPropNumber: React.PropTypes.number,
  myPropObject: React.PropTypes.object,
  myPropString: React.PropTypes.string,
  // 可以被渲染的对象 numbers, strings, elements 或 array
  myPropNode: React.PropTypes.node,
  //  React 元素
  myPropElement: React.PropTypes.element,
  // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
  myPropMessage: React.PropTypes.instanceOf(Message),
  // 用 enum 来限制 prop 只接受指定的值。
  myPropEnum: React.PropTypes.oneOf(['News', 'Photos']),
  // 可以是多个对象类型中的一个
  myPropUnion: React.PropTypes.oneOfType([
    React.PropTypes.string,
    React.PropTypes.number,
    React.PropTypes.instanceOf(Message)
  ]),
  // 指定类型组成的数组
  myPropArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
  // 指定类型的属性构成的对象
  myPropObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
  // 特定 shape 参数的对象
  myPropObjectWithShape: React.PropTypes.shape({
    color: React.PropTypes.string,
    fontSize: React.PropTypes.number
  }),
    // 任意类型加上 `isRequired` 来使 prop 不可空。
    myPropFunc: React.PropTypes.func.isRequired,
    // 不可空的任意类型
    myPropAny: React.PropTypes.any.isRequired,
    // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常，因为这样 `oneOfType` 会失效。
    myCustomProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error('Validation failed!');
    }
    }
}