reactjs - 使用扩展 (...) 运算符定义 propTypes 时，React PropTypes 无法正常工作

Question

我正在尝试使用单个 PropTypes 定义来在多个组件中重用它，但遇到了问题。我在单独的类中定义静态 propTypes，然后将其作为模块导入。比如说，我有一个 View 的 React 组件:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ExampleType from './example-type.js';

class MyComponent extends Component {
  static propTypes = {
    ...ExampleType.propTypes,  // <--- note here, that's how I'm trying to make it work
    
    // and the line below duplicates same field from ExampleType.propTypes, 
    // this is needed because otherwise Linter throws an error
    // that PropTypes is defined, but never used:
    instanceName: PropTypes.string
  }
  
  static defaultProps = {
    ...ExampleType.defaultProps
  }
  
  render() {
    return (
      <div>
        <h3>{this.props.instanceName}</h3>
        <p>
          {this.props.instanceValue}
        </p>
      </div>
    )
  }
}

example-type.js 是:

import PropTypes from 'prop-types';

class ExampleType {
  static propTypes = {
    instanceName: PropTypes.string,
    instanceValue: PropTypes.string
  }

  static defaultProps = {
    instanceName: '',
    instanceValue: ''
  }
}

export default ExampleType;

这样一来，PropTypes 检查就不会发生。如果我将 defaultProps 定义更改为没有扩展运算符的定义:

  static propTypes = {
    // ...ExampleType.propTypes,     // and now without spread ...
    instanceName: PropTypes.string,
    instanceValue: PropTypes.string
  }

它按预期工作。

好吧，我知道可以通过不同的方式重用单个属性类型定义，例如此处 https://stackoverflow.com/a/37720537/2335174 ，但我很好奇为什么我的带有传播运算符的变体不起作用。在两种情况下，MyComponent.propTypes 对象在调试器中看起来是一样的，有和没有传播。

我做错了什么吗？

Answer 1

它似乎对我有用，请看这里:https://codesandbox.io/s/jlll2zm6xv

您是否包括了 transform-object-rest-spread在你的 Babel 设置中添加插件？