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

一、简介与安装

• React.PropTypes 自 React v15.5 起已弃用。后续使用 prop-types 库代替，出于性能考虑，propTypes 只在开发模式下进行检查，也就只需要安装到开发环境即可。

• yarn 安装

  $ yarn add prop-types
  

• npm 安装

  $ 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!');
		}
    }
}