美文网首页
所有的PropTypes

所有的PropTypes

作者: JamesSawyer | 来源:发表于2018-08-07 17:21 被阅读40次
import PropTypes from 'prop-types';

MyComponent.propTypes = {
  // 特定的JS类型
  // 以下属性都是可选的
  optionalArray: PropTypes.array,
  optionalBool: PropTypes.bool,
  optionalFunc: PropTypes.func,
  optionalNumber: PropTypes.number,
  optionalObject: PropTypes.object,
  optionalString: PropTypes.string,
  optionalSymbol: PropTypes.symbol,
  
  // 任何东西都可以被渲染:numbers, strings, elements
  // 或者包含这些类型的数组(或者片段Fragment)
  optionalNode: PropTypes.node,
  
  // React 元素
  optionalElement: PropTypes.element,
  
  // 特定的值,枚举类型 'News' | 'Photos'
  optionalEnum: PropTypes.oneOf(['News', 'Photos']),
  
  // 多种类型中的一种
  // 注意 PropTypes.instanceOf
  optionalUnion: PropTypes.oneOfType([
    PropTypes.string,
    PropTypes.number,
    PropTypes.instanceOf(Message)
  ]),
  
  // 某个类型的数组
  optionalArrayOf: PropTypes.arrayOf(PropTypes.number),
  
  // 属性值为某种类型的对象
  optionalObjectOf: PropTypes.objectOf(PropTypes.number),
  
  // 特定形式的对象
  optionalObjectWithShape: PropTypes.shape({
    color: PropTypes.string,
    fontSize: PropTypes.number,
  }),
  
  // 必须包含的属性 否则出现警告
  // isRequired
  requiredFunc: PropTypes.func.isRequired,
  
  // 任意类型
  requiredAny: PropTypes.any.isRequired,
  
  // 自定义验证器,不要使用 console.warn 或者 throw,要使用 Error 对象
  // 因为console.warn || throw 在 oneOfType 中不起作用
  customProp: function(props, propName, componentName) {
    if (!/matchme/.test(props[propName])) {
      return new Error(
        'Invalid prop `' + propName + '` supplied to' + ' `' + componentName + '`. Validation failed.'
      );
    }
  },
  
  // 可以声明 'arrayOf' 和 'objectOf' 类型的验证器
  customArrayProp: PropTypes.arrayOf(function(propValue, key, componentName, location, propFullName) {
    if (!/matchme/.test(propValue[key])) {
      return new Error(
        'Invalid prop `' + propFullName + '` supplied to' +
        ' `' + componentName + '`. Validation failed.'
      );
    }
  })
}

相关文章

网友评论

      本文标题:所有的PropTypes

      本文链接:https://www.haomeiwen.com/subject/hvmavftx.html