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. runtime消息转发机制

    Objective-C 扩展了 C 语言,并加入了面向对象特性和 Smalltalk 式的消息传递机制.而这个扩展的核心是一个用 C 和 编译语言 写的 Runtime 库.它是 Objective- ...

  2. node 发送邮件demo (QQ邮箱)

    nodemailer是nodejs中的邮件发送模块,本文使用的版本为2.5.0 --下载模块 npm install nodemailer npm下载模块后,在项目中引入就可以使用: var node ...

  3. 五 python并发编程之IO模型

    一 IO模型介绍 同步(synchronous) IO和异步(asynchronous) IO,阻塞(blocking) IO和非阻塞(non-blocking)IO分别是什么,到底有什么区别?这个问 ...

  4. python 正则表达式与JSON字符串

    目录 正则表达式 概括单字符集 匹配单字符 匹配字符集 普通字符与元字符 元字符和普通的字符的混用 数量词{整数|*|+|?} 匹配指规则的字母 贪婪模式 匹配指定长度的字符串 非贪婪模式 匹配指定长 ...

  5. windows Server 2008 r2-搭建FTP服务器

    FTP协议介绍 FTP协议工作在OSI参考模型的第七层,TCP模型的第四层上(即应用层上).使用FTP传输而不是UDP,与服务端建立连接经过三次握手. FTP端口介绍 FTP默认端口是21,.(21端 ...

  6. Python_day01_作业笔记

    内容大纲: 1. python的出生与应用以及历史, python2x: 源码冗余,源码重复,源码不规范. python3x: 源码清晰优美简单.   2. python的种类. Cpython: 官 ...

  7. java+Mysql大数据的一些优化技巧

    众所周知,java在处理数据量比较大的时候,加载到内存必然会导致内存溢出,而在一些数据处理中我们不得不去处理海量数据,在做数据处理中,我们常见的手段是分解,压缩,并行,临时文件等方法; 例如,我们要将 ...

  8. Essential C++ 3.1 节的代码练习——指针方式

    // // PointerToValue.cpp // Working // // Created by Hawkins, Dakota Y on 6/3/16. // Copyright 2016 ...

  9. C#开发模式——dll多级引用的问题

    C#解决方案里有两种引用方式,项目引用和dll物理文件引用. 一.项目引用 严格引用,项目文件需包含在解决方案里,好处是便于调试,可直接进入代码.缺点是耦合度太高(必须全部编译通过才能run起来),项 ...

  10. 使用Visual Studio建立报表--C#

    原文:使用Visual Studio建立报表--C# 版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/qq_23893313/article/deta ...