文档章节

ReactNative组件属性类(propTypes)校验

卖女孩的小火柴
 卖女孩的小火柴
发布于 2017/02/09 09:33
字数 342
阅读 24
收藏 0

ReactNative组件属性类(propTypes)校验

Prop校验

  • React.PropTypes 提供很多验证器 (validator) 来验证传入数据的有效性。当向 props 传入无效数据时,JavaScript 控制台会抛出警告.

  • React.PropTypes 源代码

var ReactPropTypes = {
  array: createPrimitiveTypeChecker('array'),
  bool: createPrimitiveTypeChecker('boolean'),
  func: createPrimitiveTypeChecker('function'),
  number: createPrimitiveTypeChecker('number'),
  object: createPrimitiveTypeChecker('object'),
  string: createPrimitiveTypeChecker('string'),
  symbol: createPrimitiveTypeChecker('symbol'),

  any: createAnyTypeChecker(),
  arrayOf: createArrayOfTypeChecker,
  element: createElementTypeChecker(),
  instanceOf: createInstanceTypeChecker,
  node: createNodeChecker(),
  objectOf: createObjectOfTypeChecker,
  oneOf: createEnumTypeChecker,
  oneOfType: createUnionTypeChecker,
  shape: createShapeTypeChecker
};
  • 基本类型, array, bool, func, number, object, string, symbol
  • any, 任意不为空对象
  • arrayOf, 指定数组中项的类型
  • element, React 元素

    常用指定子级只传入一个级限制
    {
    children: React.PropTypes.element.isRequired,
    }
  • instanceOf, 指定类实例
  • node, 每一个值的类型都是基本类型,
  • objectOf, 指定类型组成的对象
  • oneOf, 参数是数组, 指定传的数据为数组中的值

    比如定义一个action,  他有指定的常量值, 'web', 'app', 'browser',所以接收到 prop 也应该是对应的指定值. 
    
    {
      action: React.PropsTypes.oneOf(['web', 'app', 'browser']),
    }
    
  • oneOfType, 参数是数组, 指定传的数据为数组中的类型
  • shape, 指定对象类型内部的结构定义

    比如需要接收一个 member 参数, member 里面有两个值,一个 id,一个 name,现在要设置id,name的类型
    
    {
      member: React.PropTypes.shape({
          id: React.PropTypes.number.isRequired,
          name:React.PropTypes.string,
      }),
    }
    
    
    • 在指定类型后使用isRequired在声明 prop 是必传的
    • 自定义校验器 (props, propName, componentName) => {return true}

本文转载自:http://blog.csdn.net/vispin/article/details/53002586

共有 人打赏支持
卖女孩的小火柴

卖女孩的小火柴

粉丝 3
博文 25
码字总数 124
作品 0
厦门
其他
私信 提问
React Native 组件之SafeAreaView

SafeAreaView简介 ReactNative官方从0.50.1版本开始,加入了针对iPhone X设备齐刘海页面适配的组件SafeAreaView,为ReactNative开发APP时对iPhone X的页面适配提供了很大的方便。目前,SafeA...

大灰狼的小绵羊哥哥
09/17
0
0
React Native跨平台移动应用开发框架介绍

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/61423043 好久没有来更新博客了,给大家说声抱歉,人一旦懒惰起来连自己都害怕。可能...

Aduroidpc
2017/03/11
0
0
学习RN之前看这一篇React入门就够了

React是一个用于构建用户界面的 JavaScript 库,起源于Facebook内部项目,13年已经开源https://github.com/facebook/react。学习ReactNative首先要了解React相关的知识(当然可以和RN同步学习...

LvesLi
06/29
0
0
京东凹凸实验室开源多端适配的 UI 组件库 Taro UI

京东凹凸实验室近日推出了一套多端 UI 组件库 —— Taro UI ,该库基于多端开发解决方案 Taro 开发,可在 微信小程序、H5、ReactNative 等多端适配运行。 Taro UI 包含以下功能特性: 简单易...

王练
08/29
0
0
Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题

Udacity也弃用React Native了 !看看他们使用React Native过程中遇到了哪些问题 2018-07-12 10:29编辑: 枣泥布丁分类:程序人生来源:程序师 React Native弃用Udacity 招聘信息: iOS开发 ...

枣泥布丁
07/12
0
0

没有更多内容

加载失败,请刷新页面

加载更多

jena RDF学习笔记

一、首先要了解RDF和Jena RDF的介绍: An Introduction to RDF and the Jena RDF API RDF及Jena RDF API介绍(中翻) 在Jena中,用于表示单个三元组的Java类是Statement。根据RDF规范,只有资...

孙幼凌
26分钟前
1
0
HTML5 240行代码实现粒子漩涡特效

效果 源码如下 <!doctype html><html><head><meta charset="utf-8"><title>H5,200行代码实现粒子漩涡特效</title><style>html,body{margin:0px;width:100%;height:100%......

lanyu96
33分钟前
1
0
fine report

FineReport xx no: 0941626c-5e513d196-f528-74a7c52d8e61

youngjdong
34分钟前
2
0
get right firefox version for your selenium

find the selenium location path find / -name selenium output: /usr/local/lib/python2.7/dist-packages/selenium get the "webdriver.xpi" file, the file is under "/usr/local/lib/pyt......

关上越
41分钟前
1
0
为小程序端添加一个session机制

我们做后台用户认证的时候一般会借助于session机制,非常方便,今天我们使用小程序的Storage机制自己实现一个session。 本文思路来自于前几日对微信wafer的源码阅读,感谢wafer所有代码编写者...

阿北2017
44分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部