文档章节

ReactNative组件属性类(propTypes)校验

卖女孩的小火柴
 卖女孩的小火柴
发布于 2017/02/09 09:33
字数 342
阅读 25
收藏 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...

大灰狼的小绵羊哥哥
2018/09/17
0
0
学习RN之前看这一篇React入门就够了

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

LvesLi
2018/06/29
0
0
React Native跨平台移动应用开发框架介绍

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

Aduroidpc
2017/03/11
0
0
ReactNative与iOS原生交互方式汇总

前言 最近用RN开发SDK,涉及RN与iOS各种交互。 有些交互比如用iOS原生切换多个RN页面,以及iOS调用RN的方法,按照网上的方法调不通,一度不知如何是好,网上资料比较少。 于是自己看RN源码分...

大灰狼的小绵羊哥哥
2018/11/13
0
0
京东凹凸实验室开源多端适配的 UI 组件库 Taro UI

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

王练
2018/08/29
5.1K
10

没有更多内容

加载失败,请刷新页面

加载更多

tac 与cat

tac从后往前看文件,结合grep使用

writeademo
29分钟前
2
0
表单中readonly和dsabled的区别

这两种写法都会使显示出来的文本框不能输入文字, 但disabled会使文本框变灰,而且通过通过表单提交时,获取不到文本框中的value值(如果有的话), 而readonly只是使文本框不能输入,外观没...

少年已不再年少
50分钟前
2
0
SpringBoot上传图片操作

首先有个上传文件的工具类 /** * 文件上传 * @param file * @param filePath * @param fileName * @throws Exception */public static void uploadFile(byte[] file, String ...

_liucui_
今天
6
0
DrawerLayout

public class MainActivity extends BaseActivity implements NavigationView.OnNavigationItemSelectedListener,OnFragmentInteractionListener{ public NavigationView navView; ......

安卓工程师王恒
今天
1
0
python精简笔记

python精简笔记-字符串基本用法 字符串常见用法: * encode() # 编码成bytes类型 * find() # 查找子串 * index() # 获取下标 * replace() # 替换子串 * len(string) # 返回字符串长度,...

平头哥-Enjoystudy
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部