美文网首页
所有的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