React文档(十五)使用propTypes进行类型检查
随着你的应用的开发,你会使用类型检查的方法来捕获很多bug。对于一些应用,你可以使用js扩展就像Flow或者TypeScript去对整个应用进行类型检查。但是即使你不是用这些扩展语言,React也有一些内置的类型检查功能。在props上运行类型检查,你可以指派特殊的propTypes属性:
import PropTypes from 'prop-types';
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
} Greeting.propTypes = {
name: PropTypes.string
};
PropTypes导出一系列验证工具可以确保你接收到的数据是有效的。在这个例子里,我们使用PropTypes.string。当一个无效的值被作为prop提供时,一个警告就会出现在js控制台里。因为性能的原因,propTypes只是在开发环境里来使用。
PropTypes
下面是一个不同验证器的例子:
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.'
);
}
})
};
限制单个子元素
通过PropTypes.element你可以指定只能有一个子元素被作为children传递给一个组件。
import PropTypes from 'prop-types';
class MyComponent extends React.Component {
render() {
// This must be exactly one element or it will warn.
const children = this.props.children;
return (
<div>
{children}
</div>
);
}
} MyComponent.propTypes = {
children: PropTypes.element.isRequired
};
默认prop值
你可以定义props的默认值通过分配特殊的defaultProps属性:
class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
} // 为属性指定默认值
Greeting.defaultProps = {
name: 'Stranger'
}; // 渲染"Hello, Stranger":
ReactDOM.render(
<Greeting />,
document.getElementById('example')
);
class Greeting extends React.Component {
static defaultProps = {
name: 'stranger'
} render() {
return (
<div>Hello, {this.props.name}</div>
)
}
}
defaultProps会确保this.props.name将会有一个值如果它没有被父组件所指定。propTypes类型检查会在defaultProps解决了之后执行,因此defaultProps也会应用。
React文档(十五)使用propTypes进行类型检查的更多相关文章
- React文档(五)组件和props
组件可以让你将UI分割成独立的,可复用的模块,然后考虑将每个模块彼此隔离.从概念上理解,组件就像js中的函数.他们接受随意的输入(被称为props)然后返回React元素来描述屏幕上应该出现什么. 函 ...
- React文档(十三)思考React
在我们的看来,React是使用js创建大型快速网站应用的首要方法.它在Facebook和Instagram的使用已经为我们展现了它自己. React的一个很好的地方就在于当你创建应用的时候它使你思考如 ...
- React文档(二十四)高阶组件
高阶组件(HOC)是React里的高级技术为了应对重用组件的逻辑.HOCs本质上不是React API的一部分.它是从React的组合性质中显露出来的模式. 具体来说,一个高阶组件就是一个获取一个组件 ...
- react文档demo实现输入展示搜索结果列表
文档页面地址:https://doc.react-china.org/docs/thinking-in-react.html 该文档只给了具体实现思路,下面是我实现的代码. 初学react,如果有写的 ...
- React文档(一)安装
React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...
- GameUnity 2.0 文档(五) 人工智能之---------------Flocking算法 (聚集,分散,列队 )
AI是游戏的灵魂,是人物的智商,是让玩家觉得游戏是否幼稚的重要判断功能,下面我将介绍国外流行,国内不行的,ai算法. 主要介绍 Flocking 和 Reciprocal Velocity Obs ...
- pyautogui 文档(五):截图及定位功能
截图函数 PyAutoGUI可以截取屏幕截图,将其保存到文件中,并在屏幕中查找图像.如果您有一个小图像,例如需要单击并希望在屏幕上找到它的按钮,这将非常有用.这些功能由PyScreeze模块提供,该模 ...
- React 使用 PropTypes 进行类型检查
注意: React.PropTypes 自 React v15.5 起已弃用.请使用 prop-types 库代替. defaultProps 用来确保 this.props.name 在父组件没有特 ...
- Abp中SwaggerUI的接口文档添加上传文件参数类型
在使用Swashbuckle上传文件的时候,在接口文档中希望看到上传控件,但是C#中,没有FromBodyAttribute这个特性,所以需要在运行时,修改参数的swagger属性. 首先看下,最 ...
随机推荐
- Linux内核态用户态相关知识 & 相互通信
http://www.cnblogs.com/bakari/p/5520860.html 内核从本质上看是一种软件——控制计算机的硬件资源,并提供上层应用程序运行的环境. 系统调用是操作系统的最小功能 ...
- CentOS下rpm命令详解
CentOS下rpm命令详解 rpm,Redhat Package Manager,即为红帽公司为RHEL开发的专用包管理器,后来更改为RPM Package Manager,类似于GNU项目,使用递 ...
- python中的单例
使用__new__ 因为一个类每一次实例化的时候,都会走它的__new__方法.所以我们可以使用__new__来控制实例的创建过程,代码如下: class Single: instance = Non ...
- Cartographer源码阅读(9):图优化的前端——闭环检测
约束计算 闭环检测的策略:搜索闭环,通过匹配检测是否是闭环,采用了分支定界法. 前已经述及PoseGraph的内容,此处继续.位姿图类定义了pose_graph::ConstraintBuilder ...
- Oracle 24角色管理
了解什么是角色 Oracle角色(role)就是一组权限(或者说是权限的集合). 用户可以给角色赋予指定的权限,然后将角色赋给相应的用户. 三种标准的角色 connect(连接角色) 拥有connec ...
- Java的反射机制的详细应用
package com.at221; import java.io.Serializable; import java.lang.reflect.*; import org.junit.Test; p ...
- Eclipse 在启动发生错误异常:An internal error occurred during: "Initializing Java Tooling". java.lang.NullPointerException的解决办法
异常现象: 打开Eclipse,出现 An internal error occurred during: "Initializing Java Tooling". java.la ...
- 【javascript】script标签的async异步解析
<script src="script.js"></script> 没有 defer 或 async,浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染 ...
- C# 生成 COM控件
C#编写COM组件 软件:Microsoft VisualStudio 2010 1.新建一个类库项目 2.将Class1.cs改为我们想要的名字(例如:MyClass.cs) 问是否同时给类改名,确 ...
- chrome内核浏览器插件的使用--Tampermonkey(油猴插件)
Tampermonkey(油猴插件),这个插件是一个用于改造你浏览器打开的网站的插件.它可以在你打开的网页中注入任意js脚本,以达到你想要的外加功能.可以说非常不错.很多时候也值得使用. 这是个chr ...