React.PropTypes是React用来typechecking的一个属性。要在组件的props上运行typechecking,可以分配特殊的propTypes属性:

  1. class Greeting extends React.Component {
  2. render() {
  3. return (
  4. <h1>Hello {this.props.name}</h1>
  5. )
  6. };
  7. }
  8. Greeting.propTypes = {
  9. name: React.PropTypes.string.isRequired //这里表示name这个实行必须是一个字符串,并且是必须要有的参数
  10. };
  1. MyComponent.propTypes = {
  2. // 你可以定义一个js原始类型的prop,默认请情况下,这是都是可选的
  3. optionalArray: React.PropTypes.array,
  4. optionalBool: React.PropTypes.bool,
  5. optionalFunc: React.PropTypes.func,
  6. optionalNumber: React.PropTypes.number,
  7. optionalObject: React.PropTypes.object,
  8. optionalString: React.PropTypes.string,
  9. optionalSymbol: React.PropTypes.symbol,
  10.  
  11. // 任何可以渲染的东西:数字,字符串,元素或数组(或片段)。
  12. optionalNode: React.PropTypes.node,
  13.  
  14. // React元素
  15. optionalElement: React.PropTypes.element,
  16.  
  17. // 你也可以声明prop是某个类的实例。 内部使用的是JS的instanceof运算符。
  18. optionalMessage: React.PropTypes.instanceOf(Message),
  19.  
  20. // 你可以通过将它作为枚举来确保你的prop被限制到特定的值。
  21. optionalEnum: React.PropTypes.oneOf(['News', 'Photos']),
  22.  
  23. // 可以是许多类型之一的对象
  24. optionalUnion: React.PropTypes.oneOfType([
  25. React.PropTypes.string,
  26. React.PropTypes.number,
  27. React.PropTypes.instanceOf(Message)
  28. ]),
  29.  
  30. // 某种类型的数组
  31. optionalArrayOf: React.PropTypes.arrayOf(React.PropTypes.number),
  32.  
  33. // 具有某种类型的属性值的对象
  34. optionalObjectOf: React.PropTypes.objectOf(React.PropTypes.number),
  35.  
  36. // 采取特定样式的对象
  37. optionalObjectWithShape: React.PropTypes.shape({
  38. color: React.PropTypes.string,
  39. fontSize: React.PropTypes.number
  40. }),
  41.  
  42. // 你可以用`isRequired`来连接到上面的任何一个类型,以确保如果没有提供props的话会显示一个警告。
  43. requiredFunc: React.PropTypes.func.isRequired,
  44.  
  45. // 任何数据类型
  46. requiredAny: React.PropTypes.any.isRequired,
  47.  
  48. // 您还可以指定自定义类型检查器。 如果检查失败,它应该返回一个Error对象。 不要`console.warn`或throw,因为这不会在`oneOfType`内工作。
  49. customProp: function(props, propName, componentName) {
  50. if (!/matchme/.test(props[propName])) {
  51. return new Error(
  52. 'Invalid prop `' + propName + '` supplied to' +
  53. ' `' + componentName + '`. Validation failed.'
  54. );
  55. }
  56. },
  57.  
  58. // 您还可以为`arrayOf`和`objectOf`提供自定义类型检查器。 如果检查失败,它应该返回一个Error对象。
  59. // 检查器将为数组或对象中的每个键调用验证函数。
  60. // 检查器有两个参数,第一个参数是数组或对象本身,第二个是当前项的键。
  61. customArrayProp: React.PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
  62. if (!/matchme/.test(propValue[key])) {
  63. return new Error(
  64. 'Invalid prop `' + propFullName + '` supplied to' +
  65. ' `' + componentName + '`. Validation failed.'
  66. );
  67. }
  68. })
  69. };

不过在react15.5.0废除了个这个属性,那么15.5.0版本之后的类型检测该怎么办呢,https://github.com/facebook/prop-types#prop-types这是新版本之后改怎么解决的git源地址;这里我们做简单的说明

  1. npm install --save prop-types //下载安装这个包
  1. import PropTypes from 'prop-types' //引入你需要检测数据类型的组件
    下面是如何在组件中使用
  1. import React from 'react';
  2. import PropTypes from 'prop-types';
  3. //组件
  4. class MyComponent extends React.Component {
  5. render() {
  6. // ... do things with the props
  7. }
  8. }
    使用
  9. MyComponent.propTypes = {
  10. // You can declare that a prop is a specific JS primitive. By default, these
  11. // are all optional.
  12. optionalArray: PropTypes.array,
  13. optionalBool: PropTypes.bool,
  14. optionalFunc: PropTypes.func,
  15. optionalNumber: PropTypes.number,
  16. optionalObject: PropTypes.object,
  17. optionalString: PropTypes.string,
  18. optionalSymbol: PropTypes.symbol,
  19.  
  20. // Anything that can be rendered: numbers, strings, elements or an array
  21. // (or fragment) containing these types.
  22. optionalNode: PropTypes.node,
  23.  
  24. // A React element.
  25. optionalElement: PropTypes.element,
  26.  
  27. // You can also declare that a prop is an instance of a class. This uses
  28. // JS's instanceof operator.
  29. optionalMessage: PropTypes.instanceOf(Message),
  30.  
  31. // You can ensure that your prop is limited to specific values by treating
  32. // it as an enum.
  33. optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  34.  
  35. // An object that could be one of many types
  36. optionalUnion: PropTypes.oneOfType([
  37. PropTypes.string,
  38. PropTypes.number,
  39. PropTypes.instanceOf(Message)
  40. ]),
  41.  
  42. // An array of a certain type
  43. optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  44.  
  45. // An object with property values of a certain type
  46. optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  47.  
  48. // An object taking on a particular shape
  49. optionalObjectWithShape: PropTypes.shape({
  50. color: PropTypes.string,
  51. fontSize: PropTypes.number
  52. }),
  53.  
  54. // You can chain any of the above with `isRequired` to make sure a warning
  55. // is shown if the prop isn't provided.
  56. requiredFunc: PropTypes.func.isRequired,
  57.  
  58. // A value of any data type
  59. requiredAny: PropTypes.any.isRequired,
  60.  
  61. // You can also specify a custom validator. It should return an Error
  62. // object if the validation fails. Don't `console.warn` or throw, as this
  63. // won't work inside `oneOfType`.
  64. customProp: function(props, propName, componentName) {
  65. if (!/matchme/.test(props[propName])) {
  66. return new Error(
  67. 'Invalid prop `' + propName + '` supplied to' +
  68. ' `' + componentName + '`. Validation failed.'
  69. );
  70. }
  71. },
  72.  
  73. // You can also supply a custom validator to `arrayOf` and `objectOf`.
  74. // It should return an Error object if the validation fails. The validator
  75. // will be called for each key in the array or object. The first two
  76. // arguments of the validator are the array or object itself, and the
  77. // current item's key.
  78. customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
  79. if (!/matchme/.test(propValue[key])) {
  80. return new Error(
  81. 'Invalid prop `' + propFullName + '` supplied to' +
  82. ' `' + componentName + '`. Validation failed.'
  83. );
  84. }
  85. })
  86. };

关于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. Ado.net设计模式

    连接类 连接类有固定的使用模式,这是常用的乐观模式: using (var conn = new SqlConnection(connstr)) { conn.Open(); //执行各种数据库操作 ...

  2. DTV_SI 汇总 & 兼谈LCN

    前言 本章主要对数字广播DVB做一个系统的概况的描述,以及一些spc的相关的内容,虽然流程分析的不多,但是做为后续 章节资料的源泉,也是不可或缺的. 一. ATSC和DVB数字电视系统的比较 本文的主 ...

  3. uva1560

    In an extended version of the game Lights Out®, is a puzzle with 5 rows of 6 buttons each (the actua ...

  4. mybatis中各种数据的映射类型

    Mybatis对应的java和数据库的数据类型,最后有图片 Mybatis                                  java                          ...

  5. J20180116

    用度 总务 用度係 总务科(管理办公用品等) 型紙 设计图 プラント 工厂

  6. react hooks 全面转换攻略(二) react本篇剩余 api

    useCallback,useMemo 因为这两个 api 的作用是一样的,所以我放在一起讲; 语法: function useMemo<T>(factory: () => T, d ...

  7. Eclipse/STS 在线安装阿里java代码规约插件

    1.打开Idea的在线安装插件界面,通过“Help”-->“Install New Software...” 进入 2. 在 “Work with” 栏输入插件包的下载地址:https://p3 ...

  8. 基于.Net Core的API框架的搭建(3)

    5.加入缓存支持 我们希望为项目增加缓存支持,我们选择Redis做为缓存数据库. 首先,我们在Services目录增加一个缓存接口类ICacheService: using System; using ...

  9. [洛谷3930]SAC E#1 - 一道大水题 Knight

    Description 他们经常在一起玩一个游戏,不,不是星际争霸,是国际象棋.毒奶色觉得F91是一只鸡.他在一个n×n的棋盘上用黑色的城堡(车).骑士(马).主教(象).皇后(副).国王(帅).士兵 ...

  10. 枚举+贪心 HDOJ 4932 Miaomiao's Geometry

    题目传送门 /* 题意:有n个点,用相同的线段去覆盖,当点在线段的端点才行,还有线段之间不相交 枚举+贪心:有坑点是两个点在同时一条线段的两个端点上,枚举两点之间的距离或者距离一半,尽量往左边放,否则 ...