IT技术 - React 组合组件属性类型 - 吾爱随笔录

我正在使用组合模式进行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>
    );
  }
}

现在，我如何为增强组件指定 proptypes？我可以这样做：

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

但这并不好，因为我必须列出Simple组件的所有props，并且每当我更改这些props时，我都必须将它们更改为Enhanced

// 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 }