乐趣区

关于前端:React-props-类型验证-vue-props-验证

jiezi

react 应用第三方 prop-types 进行类型验证

查看材料：
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.'
      );
    }
  })
};

vue 自带 props 验证

https://v3.cn.vuejs.org/guide/component-props.html#%E7%B1%BB%E5%9E%8B%E6%A3%80%E6%9F%A5
app.component('my-component', {
  props: {// 根底的类型查看 (`null` 和 `undefined` 值会通过任何类型验证)
    propA: Number,
    // 多个可能的类型
    propB: [String, Number],
    // 必填的字符串
    propC: {
      type: String,
      required: true
    },
    // 带有默认值的数字
    propD: {
      type: Number,
      default: 100
    },
    // 带有默认值的对象
    propE: {
      type: Object,
      // 对象或数组的默认值必须从一个工厂函数返回
      default() {return { message: 'hello'}
      }
    },
    // 自定义验证函数
    propF: {validator(value) {
        // 这个值必须与下列字符串中的其中一个相匹配
        return ['success', 'warning', 'danger'].includes(value)
      }
    },
    // 具备默认值的函数
    propG: {
      type: Function,
      // 与对象或数组的默认值不同，这不是一个工厂函数——这是一个用作默认值的函数
      default() {return 'Default function'}
    }
  }
})
退出移动版