关于React.PropTypes的废除,以及新版本下的react的验证方式
React.PropTypes是React用来typechecking的一个属性。要在组件的props上运行typechecking,可以分配特殊的propTypes属性:
class Greeting extends React.Component {
render() {
return (
<h1>Hello {this.props.name}</h1>
)
};
}
Greeting.propTypes = {
name: React.PropTypes.string.isRequired //这里表示name这个实行必须是一个字符串,并且是必须要有的参数
};
MyComponent.propTypes = {
// 你可以定义一个js原始类型的prop,默认请情况下,这是都是可选的
optionalArray: React.PropTypes.array,
optionalBool: React.PropTypes.bool,
optionalFunc: React.PropTypes.func,
optionalNumber: React.PropTypes.number,
optionalObject: React.PropTypes.object,
optionalString: React.PropTypes.string,
optionalSymbol: React.PropTypes.symbol,
// 任何可以渲染的东西:数字,字符串,元素或数组(或片段)。
optionalNode: React.PropTypes.node,
// React元素
optionalElement: React.PropTypes.element,
// 你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。
optionalMessage: React.PropTypes.instanceOf(Message),
// 你可以通过将它作为枚举来确保你的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),
// 采取特定样式的对象
optionalObjectWithShape: React.PropTypes.shape({
color: React.PropTypes.string,
fontSize: React.PropTypes.number
}),
// 你可以用`isRequired`来连接到上面的任何一个类型,以确保如果没有提供props的话会显示一个警告。
requiredFunc: React.PropTypes.func.isRequired,
// 任何数据类型
requiredAny: React.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: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
if (!/matchme/.test(propValue[key])) {
return new Error(
'Invalid prop `' + propFullName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
})
};
不过在react15.5.0废除了个这个属性,那么15.5.0版本之后的类型检测该怎么办呢,https://github.com/facebook/prop-types#prop-types这是新版本之后改怎么解决的git源地址;这里我们做简单的说明
npm install --save prop-types //下载安装这个包
import PropTypes from 'prop-types' //引入你需要检测数据类型的组件
下面是如何在组件中使用
import React from 'react';
import PropTypes from 'prop-types';
//组件
class MyComponent extends React.Component {
render() {
// ... do things with the props
}
}
使用
MyComponent.propTypes = {
// You can declare that a prop is a specific JS primitive. By default, these
// are all optional.
optionalArray: PropTypes.array,
optionalBool: PropTypes.bool,
optionalFunc: PropTypes.func,
optionalNumber: PropTypes.number,
optionalObject: PropTypes.object,
optionalString: PropTypes.string,
optionalSymbol: PropTypes.symbol, // Anything that can be rendered: numbers, strings, elements or an array
// (or fragment) containing these types.
optionalNode: PropTypes.node, // A React element.
optionalElement: PropTypes.element, // You can also declare that a prop is an instance of a class. This uses
// JS's instanceof operator.
optionalMessage: PropTypes.instanceOf(Message), // You can ensure that your prop is limited to specific values by treating
// it as an enum.
optionalEnum: PropTypes.oneOf(['News', 'Photos']), // An object that could be one of many types
optionalUnion: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]), // An array of a certain type
optionalArrayOf: PropTypes.arrayOf(PropTypes.number), // An object with property values of a certain type
optionalObjectOf: PropTypes.objectOf(PropTypes.number), // An object taking on a particular shape
optionalObjectWithShape: PropTypes.shape({
color: PropTypes.string,
fontSize: PropTypes.number
}), // You can chain any of the above with `isRequired` to make sure a warning
// is shown if the prop isn't provided.
requiredFunc: PropTypes.func.isRequired, // A value of any data type
requiredAny: PropTypes.any.isRequired, // You can also specify a custom validator. It should return an Error
// object if the validation fails. Don't `console.warn` or throw, as this
// won't work inside `oneOfType`.
customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
}, // You can also supply a custom validator to `arrayOf` and `objectOf`.
// It should return an Error object if the validation fails. The validator
// will be called for each key in the array or object. The first two
// arguments of the validator are the array or object itself, and the
// current item's key.
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.'
);
}
})
};
关于React.PropTypes的废除,以及新版本下的react的验证方式的更多相关文章
- IIS下的身份验证方式管理
设置.查看身份验证方式 #导航到某站点下: cd IIS:\Sites\DemoSite\DemoApp #启用站点test01下的Windows身份验证 Set-WebConfigurationPr ...
- ES5下的React
按照官方推荐的思路,React使用标准的ES6标准的语法.比如说创建一个类: class Greeting extends React.Component { render() { return &l ...
- React Hooks 你不来了解下?
前言 最近在看 React 的新语法-- React Hooks,只能一句话概括:React 语法真的是越来越强大,越写代码越少. 强烈推荐还没看 React Hooks 的同学去学习下,这会让你写r ...
- react-native —— 在Windows下搭建React Native Android开发环境
在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...
- 手把手教你在Windows下搭建React Native Android开发环境
最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...
- react+propTypes
React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的 optionalArray: React.Prop ...
- windows下安装react
在 Windows 10 64 下创建 React App 由 SHUIJINGWAN · 2018/03/26 1.在官方网站:https://nodejs.org/zh-cn/ 下载推荐版本: ...
- react 16.8版本新特性以及对react开发的影响
Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...
- React与ES6(四)ES6如何处理React mixins
React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...
随机推荐
- 287 Find the Duplicate Number 寻找重复数
一个长度为 n + 1 的整形数组,其中的数字都在 1 到 n 之间,包括 1 和 n ,可知至少有一个重复的数字存在.假设只有一个数字重复,找出这个重复的数字.注意: 不能更改数组内容(假设数 ...
- mysql之replace into与 insert into duplicat key for update
mysql实际应用中,我们在插入数据的时候,经常遇到主键冲突的情况,这是因为库中已经存在相同主键的数据,这时,我们只能更新数据:在判断是更新数据还是插入数据,我们还需要在此之前做一些必要的判断:在my ...
- [ CodeForces 1063 A ] Oh Those Palindromes
\(\\\) \(Description\) 给出 \(N\) 个小写字母,将他们排成一个字符串,使得这个字符串里包含的回文串最多. \(N\le 10^5\) \(\\\) \(Solution\) ...
- [ USACO 2007 FEB ] Lilypad Pond (Gold)
\(\\\) \(Description\) 一张\(N\times M\)的网格,已知起点和终点,其中有一些地方是落脚点,有一些地方是空地,还有一些地方是坏点. 现在要从起点到终点,每次移动走日字\ ...
- CF817B Makes And The Product
思路: 模拟,数学. 实现: #include <iostream> #include <cstdio> #include <algorithm> using na ...
- Visual Studio TFS
Overview:Active Directory环境下搭建TFS(一个domain内,with Domain Controller): 1)最简单的环境(这俩拓扑是从TFSAdmin文档中截取的,从 ...
- document.mozFullScreen
非标准该特性是非标准的,请尽量不要在生产环境中使用它! 概述 返回一个布尔值,表明当前文档是否处于全屏模式. 语法 var isFullScreen = document.mozFullScreen ...
- Jmeter之重定向请求
一.自动重定向和跟随重定向的区别 自动重定向:状态码一般是200.20X.当重定向自动跳转时,只针对GET和Head请求,自动重定向自动跳转到最终目标页面,当HTTP请求为自动重定向时,JMeter不 ...
- Springboot + SLF4j + Log4j2 打印异常日志时,耗时要5-6秒
1.使用jps -l 查看springboot项目的进程ID 2.使用命令jstack -l 进程ID > log.txt 打印堆栈信息到文件,内容如下: "http-nio-8065 ...
- 虚拟机找不到本机vmnet0,vmnet8,无法连接xshell,解决方案
首先出现这个问题肯定是第一次下载虚拟机把之前的注册表覆盖了,网卡找不到,首先卸载VMware 并且将C\ProgramData下的VMware文件夹删除掉 ,下载cceaner,点击注册表清除干净,再 ...