react当中的props-type用来检测传入组件当中的数据是否符合组件的要求,但是之前的只是能做些简单常规的判断,如果需要做复杂的判断,就需要使用到自定义函数来做类型检测了。

下面是官网的例子

customProp: function(props, propName, componentName) {
if (!/matchme/.test(props[propName])) {
return new Error(
'Invalid prop `' + propName + '` supplied to' +
' `' + componentName + '`. Validation failed.'
);
}
},

props参数为传入的属性,propsName为当前检测的属性,componentName为当前组件的名称

imgConfig是我写的自定义函数,用来判断传入的imgConfig属性是否是json对象或者是数组,不是的话,就返回数据检测错误

react自定义组件属性类型检测的更多相关文章

  1. 我的第一个React自定义组件

    今天随便翻了一下antd的组件库,看到下面这样的组件,当时我就震惊了: 这尼玛,这是出于什么样的考虑,一个列表还要用户编写子项的渲染方式. 所以,我就自己写了一个 List.js: List.less ...

  2. 【react】利用prop-types第三方库对组件的props中的变量进行类型检测

    1.引言--JavaScript就是一个熊孩子   1.1对于JSer们来说,js是自由的,但同时又有许多让人烦恼的地方.javascript很多时候就是这么一个熊孩子,他很多时候并不会像C和java ...

  3. React组件属性部类(propTypes)校验

    React组件属性类型(propTypes)校验 Prop 验证 随着应用不断变大,保证组件被正确使用变得非常有用.为此我们引入propTypes.React.PropTypes 提供很多验证器 (v ...

  4. React创建组件的不同方式(ES5 & ES6)

    一. 首先缕清楚React.createElement.React.createClass.React.Component之间的关系 1. React.createElement(HTML eleme ...

  5. react创建组件的几种方式及其区别

    react创建组件有如下几种方式 ①.函数式定义的无状态组件 ②.es5原生方式React.createClass定义的组件   ③.es6形式的extends React.Component定义的组 ...

  6. React创建组件的三种方式及其区别

    内容转载于http://www.cnblogs.com/wonyun/p/5930333.html React推出后,出于不同的原因先后出现三种定义react组件的方式,殊途同归; 具体的三种方式: ...

  7. React Native组件、生命周期及属性传值props详解

    创建组件的三种方式 第一种:通过ES6的方式创建 /** * 方式一 :ES6 */ export default class HelloComponent extends Component { r ...

  8. 十分钟学习 react配套的类型检测库——prop-types的运用

    js 有时在定义变量的类型为number 或string 时并不会报错,所以prop-types 是专门用来检测react ,以前的版本是把它放到react架构里面 ,现在作为一个独立的库搬出来了,跟 ...

  9. react hooks 如何自定义组件(react函数组件的封装)

    前言 这里写一下如何封装可复用组件.首先技术栈 react hooks + props-type + jsx封装纯函数组件.类组件和typeScript在这不做讨论,大家别白跑一趟. 接下来会说一下封 ...

随机推荐

  1. [牛客OI测试赛2]F假的数学游戏(斯特灵公式)

    题意 输入一个整数X,求一个整数N,使得N!恰好大于$X^X$. Sol 考试的时候只会$O(n)$求$N!$的前缀和啊. 不过最后的结论挺好玩的 $n! \approx \sqrt{2 \pi n} ...

  2. 【图论】[USACO]控制公司 Controlling Companies

    玄妙的搜索 题目描述 有些公司是其他公司的部分拥有者,因为他们获得了其他公司发行的股票的一部分.(此处略去一句废话)据说,如果至少满足了以下三个条件之一,公司A就可以控制公司B了: 公司A = 公司B ...

  3. ethtool查看网卡以及修改网卡配置

    ethtool 命令详解 命令描述: ethtool 是用于查询及设置网卡参数的命令. 使用概要:ethtool ethx       //查询ethx网口基本设置,其中 x 是对应网卡的编号,如et ...

  4. CSS 实现单行、多行文本溢出显示省略号

    单行溢出 width:200px; overflow:hidden; text-overflow:ellipsis; -o-text-overflow:ellipsis; -webkit-text-o ...

  5. Base64及其Python实现

    1. 什么是Base64 Base64是一种基于64个可打印字符来表示二进制数据的表示方法 Base64是一种编码方式,提及编码方式,必然有其对应的字符集合.在Base64编码中,相互映射的两个集合是 ...

  6. 阿里云服务器+Tomcat项目+mysql 发布项目全过程

    这个博客管理系统折腾我好几天了. 总结一下整个过程吧! 1.首先这个博客在tomcat下 windows系统可以完全跑起来了,无论是前台或者后台都能实现所有的功能. 2.然后我买了一个域名jasonj ...

  7. JDK各版本新特性浅谈

    JDK 5.0 自动拆装箱 枚举 可变参数 泛型 For -each 内省 静态导入 JDK 6.0 console开发控制台程序 轻量级HTTP ServerAPI 支持脚本语言 使用Compile ...

  8. hdu1950Bridging signals(求最长上升自序列nlogn算法)

    Bridging signals Time Limit: 5000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) ...

  9. TypeError: cannot perform reduce with flexible type

    想要解决这个错误,最好先明白numpy数据类型的dtype转换 生成一个浮点数组 a=np.random.random(4) 输出 a array([0.0945377,0.52199916,0.62 ...

  10. TCP的运输连接管理

    TCP的运输连接管理 TCP是面向连接的协议,有三个阶段:连接建立.数据传送 和 连接释放.运输连接的管理就是使运输连接的简历和释放都能正常地进行. 在TCP连接建立过程中要解决一下三个问题: 1.  ...