文档章节

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教程系列(一、环境的搭建)

目前仅限于windows平台下android开发 大家好,很懒的作者又回来了。这次为大家带来的是ReactNative的教程。很不一般哟~ 因为上个公司要求用这个技术(你大爷的原生不好吗?),好吧,老板说了...

猫儿不吃鱼鱼
03/11
0
0
ReactNative与iOS原生交互方式汇总

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

大灰狼的小绵羊哥哥
2018/11/13
0
0

没有更多内容

加载失败,请刷新页面

加载更多

跨域的理解,以及解决方案!

/*什么是跨域? * 跨域的主要原因是浏览器的同源策略。 * =>>所谓的同源策略就是A网页设置的 Cookie,B网页不能打开,除非这两个网页"同源"。 * 什么是同源? * =>>同源就是协议相同、域名相同...

流年那么伤
5分钟前
0
0
Nginx配置try_fiels,php无法获取$_GET参数

平时开发都是用LNMP,新安装的虚拟机在配置nginx的rewrite的时候使用try_files命令。但是在写的时候配置成“try_files $uri $uri/ /index.php?q=args;”, 在PHP的web程序中,打印$_GET为空。...

叫我哀木涕
5分钟前
0
0
【原创】Microsoft Edge可以用localhost访问但无法用IP访问

Microsoft Edge可以用localhost和127.0.0.1访问但无法用本机IP访问, chrome ie都可以推测是edge的问题,网络是专用网络,防火墙也关了: 在edge里 按F12 以在控制台里看到这句 CONSOLE21301...

shzwork
6分钟前
0
0
Python利用数学方程式画4种不一样的心型图案

前言 下面这四个心型图案,是通过科学地计算,根据数学方程式生成的,虽然做的不是特别完美,但是基本的还是能实现的 第一个心型 结果图 第二心型 结果图 学习从来不是一个人的事情,要有个相互监...

A_裙232550246
6分钟前
0
0
微信带场景参数的二维码生成与使用?

微信公众号推广时,用户通过扫二维码关注公众号,需要统计用户是通过谁的二维码进行关注。 在用户扫码关注公众号时,二维码带上推广者的参数,在关注公众号后,获取到该推广者的参数。 目前有...

wxgzhgncj
6分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部