使用 PropTypes 进行类型检查
注意: 从 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 进行类型检查的更多相关文章
- React文档(十五)使用propTypes进行类型检查
注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. 随着你的应用的开发,你会使用类型检查的方法来捕获很多bug.对于一些应用,你可以使 ...
- React 使用 PropTypes 进行类型检查
注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. defaultProps 用来确保 this.props.name 在父组件没有特 ...
- 使用PropTypes进行类型检查
原文地址 1.组件特殊属性——propTypes 对Component设置propTypes属性,可以为Component的props属性进行类型检查. import PropTypes from ' ...
- React中使用 PropTypes 进行类型检查
官方文档学习链接:https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html import React, { Component ...
- react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types
最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined 看了下自己的React版本: ...
- React类型检查
类型检查 import PropTypes from 'prop-types' 类名==List List.propTypes = { list: PropTypes.array } // 默认值 L ...
- 编译器开发系列--Ocelot语言6.静态类型检查
关于"静态类型检查",想必使用C 或Java 的各位应该非常熟悉了.在此过程中将检查表达式的类型,发现类型不正确的操作时就会报错.例如结构体之间无法用+ 进行加法运算,指针和数值之 ...
- Java中静态类型检查是如何进行的
以下内容来自维基百科,关于静态类型检查和动态类型检查的解释: 静态类型检查:基于程序的源代码来验证类型安全的过程: 动态类型检查:在程序运行期间验证类型安全的过程: Java使用静态类型检查在编译期间 ...
- Flow: JavaScript静态类型检查工具
Flow: JavaScript静态类型检查工具 Flow是Facebook出品的,针对JavaScript的静态类型检查工具.其代码托管在github之上,并遵守BSD开源协议. 关于Flow 它可 ...
随机推荐
- R多线程并行计算
先上代码案例: 主要的操作: library(parallel);#加载并行计算包 cl <- makeCluster(8);# 初始化cpu集群 clusterEvalQ(cl,library ...
- springmvc项目打war包部署到tomcat访问路径去掉项目名
一般来说,部署到tomcat则是把war包丢到webapps目录下,启动Tomcat会自动解压,成一个war包名称的文件夹项目, 例如imgManager.war 访问的地址一般是localhost: ...
- Flume性能测试报告(翻译Flume官方wiki报告)
因使用flume的时候总是会对其性能有所调研,网上找的要么就是自测的这里找到一份官方wiki的测试报告供大家参考 https://cwiki.apache.org/confluence/display ...
- Difference between link and @import
原文don’t use @import Using @import within a stylesheet adds one more roundtrip to the overall downloa ...
- 【敏捷实用工具】JIRA介绍以及使用方法
敏捷开发并不是由敏捷工具来推动的.但是没有敏捷工具的支持,就很难进行各种软件工程的相关事件,工具的作用是约束和流程,正确使用敏捷工具可以事半功倍,实践敏捷.近几年来敏捷开发催生大量敏捷工具的产生,在敏 ...
- iOS如何在一个包上切换正式环境和测试环境
最近项目处于测试阶段,所以免不了每天都得打包给测试人员,由于我们公司规模比较大,项目环境也分为了三种:测试环境.预上线(预生产)环境.上线(生产)环境.所以每到了测试后期,每天打包的时间也占了不少,遇 ...
- TFTP服务的搭建
TFTP服务的作用:提供网络下载服务 tftp服务器的安装与配置: tftp主要用于嵌入式交叉开发环境的搭建,传输文件. 0.创建tftp的工作目录,并修改权限(注意:请在主目录下创建此工作目录!) ...
- 性能测试loadrunner安装
把杀毒软件关闭 1. 点击 HP_LoadRunner_12.02_Community_Edition_T7177-15059.exe 完成后,点击下一步 接受协议 点击安装 点击完成 TOOLS - ...
- GoLand(一)安装
Infi-chu: http://www.cnblogs.com/Infi-chu/ 一.安装包下载地址https://golang.org/ 二.Windows下安装:1.下载好.msi的安装包文件 ...
- JavaWeb基础—监听器Listener
javaWeb三大组件: servlet listener(用的不多) filter 什么叫监听器: 初次相见:AWT 二次相见:SAX(XML解析时)Bundle 绑定 监听器是一个接口,内容由我们 ...