关于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 ...
随机推荐
- Ural 1158. Censored! 有限状态自动机+DP+大整数
Ural1158 看上去很困难的一道题. 原文地址 http://blog.csdn.net/prolightsfxjh/article/details/54729646 题意:给出n个不同的字符,用 ...
- MySQL-day1数据库的安装与介绍
一.mysql的安装步骤 以5.7.20版本为例: 第1步: 第2步: 第3步: 第4步: 第5步: 第6步: 第7步: 第8步: 第9步: 第10步: 第11步: 第12步: 第13步: 第14步: ...
- UI Design Do's and Don'ts
转载自-Apple 官网,感觉不错,记录之 (https://developer.apple.com/design/tips/) Some useful design tips about IOS. ...
- Akka源码分析-Cluster-Sharding
个人觉得akka提供的cluster工具中,sharding是最吸引人的.当我们需要把actor分布在不同的节点上时,Cluster sharding非常有用.我们可以使用actor的逻辑标识符与ac ...
- echart 参数 vue配置 图文展示
https://blog.csdn.net/she_lover/article/details/51448967 https://blog.csdn.net/n_meng/article/detail ...
- 个人作品:EasyPicker(轻取)简洁而又实用的文件收取Web应用
EasyPicker简洁实用且方便的在线文件收取Web应用 小弟我作为班上的学委,有一个伟大的职责,收发各科作业(尤其是专业课的上机课),上机==写报告,此时就产生了实验报告这个玩意儿,一个班少则4 ...
- restful api 错误
简介 随着移动开发和前端开发的崛起,越来越多的 Web 后端应用都倾向于实现 Restful API.Restful API 是一个简单易用的前后端分离方案,它只需要对客户端请求进行处理,然后返回结果 ...
- Hdu 5285 wyh2000 and pupil (bfs染色判断奇环) (二分图匹配)
题目链接: BestCoder Round #48 ($) 1002 题目描述: n个小朋友要被分成两班,但是有些小朋友之间是不认得的,所以规定不能把不认识的小朋友分在一个班级里面,并且一班的人数要比 ...
- 平方分割poj2104K-th Number
K-th Number Time Limit: 20000MS Memory Limit: 65536K Total Submissions: 59798 Accepted: 20879 Ca ...
- new mysqli_ and 旧mysql
旧的php处理语法: 1. <select name="s" onChange="redirec()"> <option selected&g ...