ReactNative组件属性类(propTypes)校验
ReactNative组件属性类(propTypes)校验
卖女孩的小火柴 发表于1年前
ReactNative组件属性类(propTypes)校验
  • 发表于 1年前
  • 阅读 21
  • 收藏 0
  • 点赞 0
  • 评论 0

新睿云服务器60天免费使用,快来体验!>>>   

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}
  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
卖女孩的小火柴
粉丝 3
博文 25
码字总数 124
×
卖女孩的小火柴
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: