注意: 从 React v15.5 开始 ,React.PropTypes 助手函数已被弃用,建议使用 prop-types 库 来定义contextTypes

1
2
3
4
5
6
7
8
9
10
11
12
13
import PropTypes from 'prop-types';
 
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
Greeting.propTypes = {
  name: PropTypes.string
};

PropTypes

这里是一个示例记录提供的不同的验证器:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
import PropTypes from 'prop-types';
 
MyComponent.propTypes = {
  // 你可以声明一个 prop 是一个特定的 JS 原始类型。
  // 默认情况下,这些都是可选的。
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
 
  // 任何东西都可以被渲染:numbers, strings, elements,或者是包含这些类型的数组(或者是片段)。
  optionalNode: PropTypes.node,
 
  // 一个 React 元素。
  optionalElement: PropTypes.element,
 
  // 你也可以声明一个 prop 是类的一个实例。
  // 使用 JS 的 instanceof 运算符。
  optionalMessage: PropTypes.instanceOf(Message),
 
  // 你可以声明 prop 是特定的值,类似于枚举
  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
  }),
 
  // 你可以使用 `isRequired' 链接上述任何一个,以确保在没有提供 prop 的情况下显示警告。
  requiredFunc: PropTypes.func.isRequired,
 
  // 任何数据类型的值
  requiredAny: PropTypes.any.isRequired,
 
  // 你也可以声明自定义的验证器。如果验证失败返回 Error 对象。不要使用 `console.warn` 或者 throw ,
  // 因为这不会在 `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.'
      );
    }
  })
};

要求单独的 Child

使用 PropTypes.element ,可以指定仅将单一子元素传递给组件,作为子节点。

默认的 prop 值

可以通过赋值特定的 defaultProps 属性为 props 定义默认值:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
class Greeting extends React.Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}
 
// 指定 props 的默认值:
Greeting.defaultProps = {
  name: 'Stranger'
};
 
// 渲染为 "Hello, Stranger":
ReactDOM.render(
  <Greeting />,
  document.getElementById('example')
);

 

使用 PropTypes 进行类型检查的更多相关文章

  1. React文档(十五)使用propTypes进行类型检查

    注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. 随着你的应用的开发,你会使用类型检查的方法来捕获很多bug.对于一些应用,你可以使 ...

  2. React 使用 PropTypes 进行类型检查

    注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. defaultProps 用来确保 this.props.name 在父组件没有特 ...

  3. 使用PropTypes进行类型检查

    原文地址 1.组件特殊属性——propTypes 对Component设置propTypes属性,可以为Component的props属性进行类型检查. import PropTypes from ' ...

  4. React中使用 PropTypes 进行类型检查

    官方文档学习链接:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html import React, { Component ...

  5. react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本:    ...

  6. React类型检查

    类型检查 import PropTypes from 'prop-types' 类名==List List.propTypes = { list: PropTypes.array } // 默认值 L ...

  7. 编译器开发系列--Ocelot语言6.静态类型检查

    关于"静态类型检查",想必使用C 或Java 的各位应该非常熟悉了.在此过程中将检查表达式的类型,发现类型不正确的操作时就会报错.例如结构体之间无法用+ 进行加法运算,指针和数值之 ...

  8. Java中静态类型检查是如何进行的

    以下内容来自维基百科,关于静态类型检查和动态类型检查的解释: 静态类型检查:基于程序的源代码来验证类型安全的过程: 动态类型检查:在程序运行期间验证类型安全的过程: Java使用静态类型检查在编译期间 ...

  9. Flow: JavaScript静态类型检查工具

    Flow: JavaScript静态类型检查工具 Flow是Facebook出品的,针对JavaScript的静态类型检查工具.其代码托管在github之上,并遵守BSD开源协议. 关于Flow 它可 ...

随机推荐

  1. R多线程并行计算

    先上代码案例: 主要的操作: library(parallel);#加载并行计算包 cl <- makeCluster(8);# 初始化cpu集群 clusterEvalQ(cl,library ...

  2. springmvc项目打war包部署到tomcat访问路径去掉项目名

    一般来说,部署到tomcat则是把war包丢到webapps目录下,启动Tomcat会自动解压,成一个war包名称的文件夹项目, 例如imgManager.war 访问的地址一般是localhost: ...

  3. Flume性能测试报告(翻译Flume官方wiki报告)

    因使用flume的时候总是会对其性能有所调研,网上找的要么就是自测的这里找到一份官方wiki的测试报告供大家参考 https://cwiki.apache.org/confluence/display ...

  4. Difference between link and @import

    原文don’t use @import Using @import within a stylesheet adds one more roundtrip to the overall downloa ...

  5. 【敏捷实用工具】JIRA介绍以及使用方法

    敏捷开发并不是由敏捷工具来推动的.但是没有敏捷工具的支持,就很难进行各种软件工程的相关事件,工具的作用是约束和流程,正确使用敏捷工具可以事半功倍,实践敏捷.近几年来敏捷开发催生大量敏捷工具的产生,在敏 ...

  6. iOS如何在一个包上切换正式环境和测试环境

    最近项目处于测试阶段,所以免不了每天都得打包给测试人员,由于我们公司规模比较大,项目环境也分为了三种:测试环境.预上线(预生产)环境.上线(生产)环境.所以每到了测试后期,每天打包的时间也占了不少,遇 ...

  7. TFTP服务的搭建

    TFTP服务的作用:提供网络下载服务 tftp服务器的安装与配置: tftp主要用于嵌入式交叉开发环境的搭建,传输文件. 0.创建tftp的工作目录,并修改权限(注意:请在主目录下创建此工作目录!) ...

  8. 性能测试loadrunner安装

    把杀毒软件关闭 1. 点击 HP_LoadRunner_12.02_Community_Edition_T7177-15059.exe 完成后,点击下一步 接受协议 点击安装 点击完成 TOOLS - ...

  9. GoLand(一)安装

    Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.安装包下载地址https://golang.org/ 二.Windows下安装:1.下载好.msi的安装包文件 ...

  10. JavaWeb基础—监听器Listener

    javaWeb三大组件: servlet listener(用的不多) filter 什么叫监听器: 初次相见:AWT 二次相见:SAX(XML解析时)Bundle 绑定 监听器是一个接口,内容由我们 ...