React文档（十五）使用propTypes进行类型检查

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

随着你的应用的开发，你会使用类型检查的方法来捕获很多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')
);

如果你在使用像 transform-class-properties 的 Babel 转换器，你也可以在React 组件类中声明 defaultProps 作为静态属性。这个语法还没有最终通过，在浏览器中需要一步编译工作。更多信息，查看类字段提议。

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元素来描述屏幕上应该出现什么. ...
Android 系统（131）---ODM 开发用户常见需求文档（五）
ODM 开发用户常见需求文档(五) 一:图库中的照片全屏显 (packages/apps/Gallery2/) 第一种: [java] view plaincopy diff --git a/src/ ...
《信息化项目文档模板五——系统详细设计模板》
系列文章目录 <信息化项目文档模板一--项目需求说明书> <信息化项目文档模板二--项目启动会文档模板> <信息化项目文档模板三--会议纪要模板> <信息化项 ...
react 使用 PropTypes 进行类型检查
目录前言一.安装 prop-types 插件二.PropTypes 的规则 1.PropTypes 的一系列验证 (1).检测 JS 原生类型 (2).检测任何元素 (3).检测 react 元 ...
[OHIF-Viewers]医疗数字阅片-医学影像-使用 PropTypes 进行类型检查
[OHIF-Viewers]医疗数字阅片-医学影像-使用 PropTypes 进行类型检查注意: 自 React v15.5 起,React.PropTypes 已移入另一个包中.请使用 prop- ...
React文档（一）安装
React是一个灵活的可以用于各种不同项目的框架,你可以用它来写新应用,你也可以逐步将它引进已有的代码库而不用重写整个项目. 试用React 如果你想玩一玩React,那么就去CodePen上试一试. ...
服务器测评文档,十年磨一剑，腾讯自研TBase数据库有奖测评
[TBase开源版测评]征文活动获奖名单公布:https://cloud.tencent.com/developer/article/1691427 TBase是 7月13日,TBase重磅发布了开源 ...
word文档变成0字节_如何恢复0字节的word文档【五个步骤免费恢复】
如何安全找回丢失数据的方法 1. 下载并安装B计划数据恢复软件. 2. 运行恢复软件,点击"深度扫描". 深度扫描是绕过文件系统直接从硬盘.U盘.SD卡等设备底层恢复数据,因此使用 ...
GameUnity 2.0 文档（五）人工智能之---------------Flocking算法（聚集，分散，列队）...
AI是游戏的灵魂,是人物的智商,是让玩家觉得游戏是否幼稚的重要判断功能,下面我将介绍国外流行,国内不行的,ai算法. 主要介绍 Flocking 和 Reciprocal Velocity Obs ...

React文档（十五）使用propTypes进行类型检查

React文档（十五）使用propTypes进行类型检查相关推荐

最新文章

热门文章