Question

我想在创建React组件时使用一些抽象。例如：

class AbstractButton extends React.Component {
  render() {
    return (
      <button
        onClick={this.props.onClick}
        className={this.definitions.className}>
        {this.props.text}
      </button>
    }
}
class PrimaryButton extends AbstractButton {
  constructor(options) {
    super(options);
    this.definitions = {
        className: 'btn btn-primary'
    };
  }
}
class SuccessButton extends AbstractButton {
  constructor(options) {
    super(options);
    this.definitions = {
        className: 'btn btn-success'
    };
  }
}

我不想通过definitions传递这些props因为我知道这些definitions - 在这种情况下是class - 永远不会改变。< / p>

它是React中的反模式吗？或者可以吗？

我的问题是this altjs issue：这种抽象与@connectToStores不兼容。

Answer 1

一般来说，没有理由不在此处使用合成而不是深度继承：

set

这与您的建议一样功能，但更简单，更容易推理。它清楚地表明了class Button extends React.Component { render() { return (<button onClick={this.props.onClick} className={this.props.className} > {this.props.text} </button>); } static propTypes = { className: React.PropTypes.string.isRequired, onClick: React.PropTypes.func } } class PrimaryButton extends React.Component { render() { return <Button {...this.props} className="btn btn-primary" />; } }实际需要做什么信息。

一旦实现这一飞跃，您可以完全消除这些类并使用无状态组件：

Button

这将允许React应用更多优化，因为您的组件不需要任何特殊的生命周期事件支持或状态管理。由于现在你只是在使用纯函数，因此更容易推理。

顺便说一句，如果你试图制作一些包裹Bootstrap的React组件，那么也许你应该看看React-Bootstrap。

React.js中的抽象

1 个答案: