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. 列表与特殊字符,div(新手HTMLL基础)

    1.无序列表 -项目符号:实心圆(disc).方框(square).空心圆(circle) -列表<ul>---- 列表项<li>--- </li></ul& ...

  2. Webpack--模块打包器

    首先介绍一个安装webpack的百度经验:https://jingyan.baidu.com/article/a3a3f811230ee58da3eb8a6e.html 推荐一个详细介绍webpack ...

  3. 【转】C++ 值传递、指针传递、引用传递详解

    而关于值传递,指针传递,引用传递这几个方面还会存在误区, 所有我觉的有必要在这里也说明一下~ 下文会通过例子详细说明哦 值传递: 形参是实参的拷贝,改变形参的值并不会影响外部实参的值.从被调用函数的角 ...

  4. 牛客NOIP提高组R1 A中位数(二分)

    题意 题目链接 Sol 很神仙的题目啊,考场上只会$n^2$的暴力.. 考虑直接二分一个$mid$,我们来判断最终答案是否可能大于$x$. 判断的时候记录一下前缀最小值即可, 设$s[i]$表示$1- ...

  5. docker部署Ceph分布式存储集群

    1.环境准备 3台virtualbox虚拟机,用来安装ceph集群,已用docker-machine安装上了docker,每台虚拟机虚拟创建一个5G的硬盘,用于存储osd数据,例如:/dev/sdb ...

  6. python2, 3环境变量配置(win10下)

    1.找到此电脑,右击点击属性 2.左边侧栏,高级系统设置 3.系统属性中点击高级 4.点击环境变量 5.可以看到 某某某用户变量和系统变量两个方框 其中,系统变量是要你在打开cmd是用管理员身份运行所 ...

  7. ZendFramework-2.4 源代码 - 关于MVC - Controller层

    // 1.控制器管理器 class ServiceManager implements ServiceLocatorInterface { public function __construct(Co ...

  8. 初学Python不知道做什么项目好?来看看练手项目如何?

    对于初学者来说,在学习编程的初期,由于基础知识点的学习是比较无聊的,所以大家可能会有所反感,为了减弱大家的反感,我给大家带来一个简单的小项目——实现屏保计时器,这个项目就算是刚学Python的小伙伴, ...

  9. (转)CocoaPods

    本文转自http://nshipster.cn/cocoapods/ 文明是建立在道路,桥梁,运河,下水道,管线,电线和光纤这些基础设施之上的.只要设计和施工得当,它们可以帮助社会成倍的发展. 唯一的 ...

  10. Java中创建(实例化)对象的五种方式

    Java中创建(实例化)对象的五种方式1.用new语句创建对象,这是最常见的创建对象的方法. 2.通过工厂方法返回对象,如:String str = String.valueOf(23); 3.运用反 ...