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

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

一、简介与安装

  • React.PropTypesReact 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!');
    }
    }
}
相关文章
|
30天前
|
缓存 前端开发 JavaScript
【第58期】React 开发者的 Awesome 库
【第58期】React 开发者的 Awesome 库
86 1
|
30天前
|
设计模式 前端开发 数据可视化
【第4期】一文了解React UI 组件库
【第4期】一文了解React UI 组件库
176 0
|
30天前
|
存储 前端开发 JavaScript
【第39期】一文认识React的状态管理库
【第39期】一文认识React的状态管理库
77 0
|
30天前
|
资源调度 前端开发 JavaScript
React 的antd-mobile 组件库,嵌套路由
React 的antd-mobile 组件库,嵌套路由
64 0
|
30天前
|
前端开发 Android开发 iOS开发
应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
【2月更文挑战第31天】应用研发平台EMAS使用 aliyun-react-native-push 库接入推送和辅助通道,推送都可以收到,但是在App切到后台或者杀掉进程之后就收不到推送了,是需要配置什么吗?
40 2
|
30天前
|
开发框架 JavaScript 前端开发
React.js:改变Web开发方式的JavaScript库
React.js:改变Web开发方式的JavaScript库
45 1
|
30天前
|
前端开发
react 使用 antd-mobile组件库实现下滑加载数据
react 使用 antd-mobile组件库实现下滑加载数据
|
30天前
|
前端开发 JavaScript 开发者
【第48期】一文了解React几个流行的工具和库
【第48期】一文了解React几个流行的工具和库
41 0
|
30天前
|
前端开发 JavaScript API
React 生态系统:路由、状态管理、调试、测试、组件库、文档……
React 生态系统:路由、状态管理、调试、测试、组件库、文档……
51 0
|
30天前
|
传感器 缓存 前端开发
效率宝典:10个实用的 React Hooks 库
效率宝典:10个实用的 React Hooks 库
142 0