Reactjs 反应组分类型

我正在使用react的合成模式。例如，我有一个简单的组件：

class Simple extends React.Component {
  render() {
    return <div>{this.props.text}</div>;
  }
}

Simple.propTypes = {
  text: React.PropTypes.string.isRequired
};

class Enhanced extends React.Component {
  render() {
    return (
      <div>
        <div>Hi, I'm the enhanced version</div>
        <Simple {...this.props} />
      </div>
    );
  }
}

---

但这并不好，因为我必须列出

Simple

组件的所有道具，而且每当我更改这些道具时，我都必须在

Enhanced

中更改它们。道具类型

只是普通的JS对象。您可以随心所欲地编写它们：

// Simple.js
export const simplePropTypes = {
  text: React.PropTypes.string.isRequired
}

Simple.propTypes = simplePropTypes

// Enhanced.js
import Simple, { simplePropTypes } from './Simple'

Enhanced.propTypes = {
  somethingElse: React.PropTypes.number,
  ...simplePropTypes
}

更新：

您应该能够直接使用组件定义的

propTypes

Enhanced.propTypes = {
  somethingElse: React.PropTypes.number,
  ...Simple.propTypes
}

---

对于更新后的答案，这是es7的功能吗？似乎不适用于Med直接从组件构建propTypes也不适用于我。你真的试过吗？你不能对道具使用排列操作符，因为eslint不会识别它们。看见

Enhanced.propTypes = {
  somethingElse: React.PropTypes.number,
  ...Simple.propTypes
}