React 组合组件 proptypes

Question

我正在使用合成模式进行反应。因此，例如，我有这个简单的组件：

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>
    );
  }
}

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

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

但这并不好，因为我必须列出 Simple 组件的所有道具，并且每当我更改这些道具时，我都必须在 Enhanced[=15= 中更改它们]

Answer 1

propTypes 只是普通的 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
}

React 组合组件 proptypes

React composition component proptypes

reactjs

react-proptypes