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的验证方式的更多相关文章

  1. IIS下的身份验证方式管理

    设置.查看身份验证方式 #导航到某站点下: cd IIS:\Sites\DemoSite\DemoApp #启用站点test01下的Windows身份验证 Set-WebConfigurationPr ...

  2. ES5下的React

    按照官方推荐的思路,React使用标准的ES6标准的语法.比如说创建一个类: class Greeting extends React.Component { render() { return &l ...

  3. React Hooks 你不来了解下?

    前言 最近在看 React 的新语法-- React Hooks,只能一句话概括:React 语法真的是越来越强大,越写代码越少. 强烈推荐还没看 React Hooks 的同学去学习下,这会让你写r ...

  4. react-native —— 在Windows下搭建React Native Android开发环境

    在Windows下搭建React Native Android开发环境 前段时间在开发者头条收藏了 @天地之灵_邓鋆 分享的<在Windows下搭建React Native Android开发环 ...

  5. 手把手教你在Windows下搭建React Native Android开发环境

    最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考.(我都是参考官方文档的 ...

  6. react+propTypes

    React.createClass({ propTypes: { // 可以声明 prop 为指定的 JS 基本数据类型,默认情况,这些数据是可选的 optionalArray: React.Prop ...

  7. windows下安装react

    在 Windows 10 64 下创建 React App 由 SHUIJINGWAN · 2018/03/26   1.在官方网站:https://nodejs.org/zh-cn/ 下载推荐版本: ...

  8. react 16.8版本新特性以及对react开发的影响

    Facebook团队对社区上的MVC框架都不太满意的情况下,开发了一套开源的前端框架react,于2013年发布第一个版本. react最开始倡导函数式编程,使用function以及内部方法React ...

  9. React与ES6(四)ES6如何处理React mixins

    React与ES6系列: React与ES6(一)开篇介绍 React和ES6(二)ES6的类和ES7的property initializer React与ES6(三)ES6类和方法绑定 React ...

随机推荐

  1. bzoj4818

    http://www.lydsy.com/JudgeOnline/problem.php?id=4818 矩阵快速幂+dp 首先我们来写一个dp dp[i][j]:选到第i个数,和为j,复杂度nm,不 ...

  2. openStack Aio 环境的neutron agent-list和cluster 环境 CLI结果对比

  3. GCD中各种队列和任务执行方式的组合

    一.概念回顾 1.GCD全称 Grand Central Dispatch ,是纯C语言,提供了非常多强大的函数,来进行系统线程的管理. 2.优势:GCD是苹果公司为多核的并行运算提出的解决方案.GC ...

  4. QRCoder生成二维码

    现在二维码支付越来越流行,二维码使用的地方越来越多,项目中也需要一个二维码生成工具,QRCoder是一个简单的生成二维码的库,用C#.NET编写,他是开源的MIT-license. 二维码简介 二维条 ...

  5. JavaScript--History 对象

    history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能. 注意:从窗口被打开的那一刻开始记录,每个浏览器窗口.每个标签页乃至每个框架,都有自己的history ...

  6. 创建maven项目遇到的问题

    1.新建完成的maven项目,缺少src/main/java 解决方案:把项目中的jre换成eclipse中默认的jre. 另外还可以参考:解决Eclipse建立Maven项目后无法建立src/mai ...

  7. URI URL URN的区别

    一:什么是URI,URL,URN ? URI:Uniform Resource Identifier,统一资源标识符,是一个用于表示互联网上资源名称的字符串 格式:http://www.xxx.com ...

  8. setTimeout 0

    setTimeout 0 就是把事件放到下一次事件循环时调用,至少要一个时钟之后: ); console.log('this should before setTimeout 0'); var i=0 ...

  9. Expectation-Maximization(EM) 算法

    Expectation-Maximization 算法是统计学中用来给带隐含变量的模型做最大似然(和最大后验概率)的一种方法.EM 的应用特别广泛,经典的比如做概率密度估计用的 Gaussian Mi ...

  10. jquery插件集合

    jQuery由美国人John Resig创建,至今已吸引了来自世界各地的众多javascript高手加入其team. jQuery是继prototype之后又一个优秀的Javascrīpt框架.其经典 ...