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}

转载于:https://my.oschina.net/vistier/blog/834388

• 点赞
• 收藏
• 分享
• 文章举报