关于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 ...
随机推荐
- Ado.net设计模式
连接类 连接类有固定的使用模式,这是常用的乐观模式: using (var conn = new SqlConnection(connstr)) { conn.Open(); //执行各种数据库操作 ...
- DTV_SI 汇总 & 兼谈LCN
前言 本章主要对数字广播DVB做一个系统的概况的描述,以及一些spc的相关的内容,虽然流程分析的不多,但是做为后续 章节资料的源泉,也是不可或缺的. 一. ATSC和DVB数字电视系统的比较 本文的主 ...
- uva1560
In an extended version of the game Lights Out®, is a puzzle with 5 rows of 6 buttons each (the actua ...
- mybatis中各种数据的映射类型
Mybatis对应的java和数据库的数据类型,最后有图片 Mybatis java ...
- J20180116
用度 总务 用度係 总务科(管理办公用品等) 型紙 设计图 プラント 工厂
- react hooks 全面转换攻略(二) react本篇剩余 api
useCallback,useMemo 因为这两个 api 的作用是一样的,所以我放在一起讲; 语法: function useMemo<T>(factory: () => T, d ...
- Eclipse/STS 在线安装阿里java代码规约插件
1.打开Idea的在线安装插件界面,通过“Help”-->“Install New Software...” 进入 2. 在 “Work with” 栏输入插件包的下载地址:https://p3 ...
- 基于.Net Core的API框架的搭建(3)
5.加入缓存支持 我们希望为项目增加缓存支持,我们选择Redis做为缓存数据库. 首先,我们在Services目录增加一个缓存接口类ICacheService: using System; using ...
- [洛谷3930]SAC E#1 - 一道大水题 Knight
Description 他们经常在一起玩一个游戏,不,不是星际争霸,是国际象棋.毒奶色觉得F91是一只鸡.他在一个n×n的棋盘上用黑色的城堡(车).骑士(马).主教(象).皇后(副).国王(帅).士兵 ...
- 枚举+贪心 HDOJ 4932 Miaomiao's Geometry
题目传送门 /* 题意:有n个点,用相同的线段去覆盖,当点在线段的端点才行,还有线段之间不相交 枚举+贪心:有坑点是两个点在同时一条线段的两个端点上,枚举两点之间的距离或者距离一半,尽量往左边放,否则 ...