【React系列】Props 验证

Props 验证使用 propTypes,它可以保证我们的应用组件被正确使用,React.PropTypes 提供很多验证器 (validator) 来验证传入数据是否有效。当向 props 传入无效数据时,JavaScript 控制台会抛出警告。

常见的验证器:


    React.createClass({
      propTypes: {
        // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的
        optionalArray: React.PropTypes.array,
        optionalBool: React.PropTypes.bool,
        optionalFunc: React.PropTypes.func,
        optionalNumber: React.PropTypes.number,
        optionalObject: React.PropTypes.object,
        optionalString: React.PropTypes.string,

        // 可以被渲染的对象 numbers, strings, elements 或 array
        optionalNode: React.PropTypes.node,

        //  React 元素
        optionalElement: React.PropTypes.element,

        // 用 JS 的 instanceof 操作符声明 prop 为类的实例。
        optionalMessage: React.PropTypes.instanceOf(Message),

        // 用 enum 来限制 prop 只接受指定的值。
        optionalEnum: React.PropTypes.oneOf([‘News‘, ‘Photos‘]),

        // 可以是多个对象类型中的一个
        optionalUnion: React.PropTypes.oneOfType([
          React.PropTypes.string,
          React.PropTypes.number,
          React.PropTypes.instanceOf(Message)
        ]),

        // 指定类型组成的数组
        optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),

        // 指定类型的属性构成的对象
        optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),

        // 特定 shape 参数的对象
        optionalObjectWithShape: React.PropTypes.shape({
          color: React.PropTypes.string,
          fontSize: React.PropTypes.number
        }),

        // 任意类型加上 `isRequired` 来使 prop 不可空。
        requiredFunc: React.PropTypes.func.isRequired,

        // 不可空的任意类型
        requiredAny: React.PropTypes.any.isRequired,

        // 自定义验证器。如果验证失败需要返回一个 Error 对象。不要直接使用 `console.warn` 或抛异常,
        // 因为这样 `oneOfType` 会失效。
        customProp: function(props, propName, componentName) {
          if (!/matchme/.test(props[propName])) {
            return new Error(‘Validation failed!‘);
          }
        }
      }
    });

注意: React.PropTypes 自 React v15.5 起已弃用。请使用 prop-types 库代替。


import PropTypes from ‘prop-types‘;

MyComponent.propTypes = {
  // 你可以将属性声明为以下 JS 原生类型
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,

  // 任何可被渲染的元素(包括数字、字符串、子元素或数组)。
  optionalNode: PropTypes.node,

  // 一个 React 元素
  optionalElement: PropTypes.element,

  // 你也可以声明属性为某个类的实例,这里使用 JS 的
  // instanceof 操作符实现。
  optionalMessage: PropTypes.instanceOf(Message),

  // 你也可以限制你的属性值是某个特定值之一
  optionalEnum: PropTypes.oneOf([‘News‘, ‘Photos‘]),

  // 限制它为列举类型之一的对象
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),

  // 一个指定元素类型的数组
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),

  // 一个指定类型的对象
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),

  // 一个指定属性及其类型的对象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number
  }),

  // 你也可以在任何 PropTypes 属性后面加上 `isRequired`
  // 后缀,这样如果这个属性父组件没有提供时,会打印警告信息
  requiredFunc: PropTypes.func.isRequired,

  // 任意类型的数据
  requiredAny: PropTypes.any.isRequired,

  // 你也可以指定一个自定义验证器。它应该在验证失败时返回
  // 一个 Error 对象而不是 `console.warn` 或抛出异常。
  // 不过在 `oneOfType` 中它不起作用。
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        ‘Invalid prop `‘ + propName + ‘` supplied to‘ +
        ‘ `‘ + componentName + ‘`. Validation failed.‘
      );
    }
  },

  // 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf`
  // 验证器,它应该在验证失败时返回一个 Error 对象。 它被用
  // 于验证数组或对象的每个值。验证器前两个参数的第一个是数组
  // 或对象本身,第二个是它们对应的键。
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        ‘Invalid prop `‘ + propFullName + ‘` supplied to‘ +
        ‘ `‘ + componentName + ‘`. Validation failed.‘
      );
    }
  })
};

来源:https://segmentfault.com/a/1190000010921839

原文地址:https://www.cnblogs.com/qixidi/p/10160755.html

时间: 2024-10-09 08:31:47

【React系列】Props 验证的相关文章

react Props 验证 propTypes,

<body><!-- React 真实 DOM 将会插入到这里 --><div id="example"></div> <!-- 引入 React --><script src="src/libs/react.js"></script><!-- 引入 JSX 语法格式转换器 --><script src="src/libs/JSXTransformer.j

React 系列教程 1:实现 Animate.css 官网效果

前言 这是 React 系列教程的第一篇,我们将用 React 实现 Animate.css 官网的效果.对于 Animate.css 官网效果是一个非常简单的例子,原代码使用 jQuery 编写,就是添加类与删除类的操作.这对于学习 React 来说是一个非常简易的例子,但是我并不会在教程中介绍相关的前置知识,比如 JSX.ES6 等,对于小白来说可能还会有一些困惑的地方,所以还要了解一下 React 相关的基础知识.虽然 React 有很多值得深究的知识,但这个系列教程并不会涉及高大深的内容

从 0 到 1 实现 React 系列 —— 4.setState优化和ref的实现

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/ref/...) 从 0 到 1 实现 React 系列 -- JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 -- 组件和 state|props 从 0 到 1 实现 React 系列 -- 生命周期和 diff 算法 从 0 到 1 实现 React 系列 -- 优化 set

从 0 到 1 实现 React 系列 —— 5.PureComponent 实现 &amp;&amp; HOC 探幽

本系列文章在实现一个 cpreact 的同时帮助大家理顺 React 框架的核心内容(JSX/虚拟DOM/组件/生命周期/diff算法/setState/PureComponent/HOC/...) 项目地址 从 0 到 1 实现 React 系列 -- JSX 和 Virtual DOM 从 0 到 1 实现 React 系列 -- 组件和 state|props 从 0 到 1 实现 React 系列 -- 生命周期和 diff 算法 从 0 到 1 实现 React 系列 -- 优化 se

React中Props 和 State用法

React中Props 和 State用法 1.本质 一句话概括,props 是组件对外的接口,state 是组件对内的接口.组件内可以引用其他组件,组件之间的引用形成了一个树状结构(组件树),如果下层组件需要使用上层组件的数据或方法,上层组件就可以通过下层组件的props属性进行传递,因此props是组件对外的接口.组件除了使用上层组件传递的数据外,自身也可能需要维护管理数据,这就是组件对内的接口state.根据对外接口props 和对内接口state,组件计算出对应界面的UI=>UI = C

从 0 到 1 实现 React 系列 —— 组件和 state|props

看源码一个痛处是会陷进理不顺主干的困局中,本系列文章在实现一个 (x)react 的同时理顺 React 框架的主干内容(JSX/虚拟DOM/组件/...) 项目地址 组件即函数 在上一篇 JSX 和 Virtual DOM 中,解释了 JSX 渲染到界面的过程并实现了相应代码,代码调用如下所示: import React from 'react' import ReactDOM from 'react-dom' const element = ( <div className="titl

React系列--三大属性 props refs state

https://blog.csdn.net/ImagineCode/article/details/82429819 props:组件外部向组件内部传值用,标签属性都挂载在 props上, <AddTodo    add={this.add}          length={todos.length}/> AddTodo 组件内部就可以使用 props来获取值, this.props.length         组件内部也可以获取外部传递的方法, this.props.add(xxx) /

React 系列 - 写出优雅的路由

前言 自前端框架风靡以来,路由一词在前端的热度与日俱增,他是几乎所有前端框架的核心功能点.不同于后端,前端的路由往往需要表达更多的业务功能,例如与菜单耦合.与标题耦合.与"面包屑"耦合等等,因此很少有拆箱即用的完整方案,多多少少得二次加工一下. 1. UmiJS 简述 优秀的框架可以缩短 90% 以上的无效开发时间,蚂蚁的 UmiJS 是我见过最优雅的 React 应用框架,或者可以直接说是最优雅的前端解决方案(欢迎挑战),本系列将逐步展开在其之上的应用,本文重点为"路由&q

React Native props &amp; state

今天又敲了一丁点代码,看了一下props和state的用法 原本以为state只是一个状态,但是又阅读了一下原文,才知道state是一组状态,这些状态是开发者自己定义的,都统一在state这个大类底下,跟props一样都是 this.props.propertyName this.state.stateName 这种形式,props和state是控制组件的两种类型,props是开发者自定义的组件参数,state表达的是一种状态用于控制组件的内容 /** * Sample React Native