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.'
          );
        }
      })
    };
  • 相关阅读:
    扩展知识
    day61——多表操作(增、删除、改、基于对象的跨表查询)
    day60——单表操作补充(批量插入、查询、表结构)
    day59——orm单表操作
    day58——模板继承、组件、自定义标签和过滤器、inclusion_tag、静态文件配置、url别名和反向解析、url命名空间
    day57——视图、模板渲染
    WARNING: Ignoring invalid distribution -ip
    Python- 【python无法更新pip】提示python.exe: No module named pip
    Anaconda Prompt 切换路径不能进入D盘
    Failed calling sys.__interactivehook__ 错误的解决
  • 原文地址:https://www.cnblogs.com/shengulong/p/8463757.html
Copyright © 2011-2022 走看看