zoukankan      html  css  js  c++  java
  • react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types

    最近使用React的类型检查PropTypes时,遇到错误:TypeError: Cannot read property 'array' of undefined

    看了下自己的React版本:    "react": "^16.2.0",
    google搜了下,原来:react的类型检查PropTypes自React v15.5起已弃用,请使用prop-types
    使用方法参考:

    https://doc.react-china.org/docs/typechecking-with-proptypes.html

    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,
    
      // 任何可被渲染的元素(包括数字、字符串、子元素或数组)。
      optionalNode: PropTypes.node,
    
      // 一个 React 元素
      optionalElement: PropTypes.element,
    
      // 你也可以声明属性为某个类的实例,这里使用 JS 的
      // instanceof 操作符实现。
      optionalMessage: PropTypes.instanceOf(Message),
    
      // 你也可以限制你的属性值是某个特定值之一
      optionalEnum: PropTypes.oneOf(['News', 'Photos']),
    
      // 限制它为列举类型之一的对象
      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
      }),
    
      // 你也可以在任何 PropTypes 属性后面加上 `isRequired` 
      // 后缀,这样如果这个属性父组件没有提供时,会打印警告信息
      requiredFunc: PropTypes.func.isRequired,
    
      // 任意类型的数据
      requiredAny: PropTypes.any.isRequired,
    
      // 你也可以指定一个自定义验证器。它应该在验证失败时返回
      // 一个 Error 对象而不是 `console.warn` 或抛出异常。
      // 不过在 `oneOfType` 中它不起作用。
      customProp: function(props, propName, componentName) {
        if (!/matchme/.test(props[propName])) {
          return new Error(
            'Invalid prop `' + propName + '` supplied to' +
            ' `' + componentName + '`. Validation failed.'
          );
        }
      },
    
      // 不过你可以提供一个自定义的 `arrayOf` 或 `objectOf` 
      // 验证器,它应该在验证失败时返回一个 Error 对象。 它被用
      // 于验证数组或对象的每个值。验证器前两个参数的第一个是数组
      // 或对象本身,第二个是它们对应的键。
      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.'
          );
        }
      })
    };
  • 相关阅读:
    EF数据迁移完整步骤
    ajax跨域最全解决方案
    WPF控件与WPF窗体
    WPF模板是把控件MVC模式化
    对象与类型
    Java加权负载均衡策略
    db2列式存储
    linux离线安装mongodb及java调用
    python合并目录下excel数据
    python多线程迁移db2数仓9T数据
  • 原文地址:https://www.cnblogs.com/shengulong/p/8463757.html
Copyright © 2011-2022 走看看