React.js 中的抽象

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

我不想通过 props 传递这些 definitions 因为我知道这些 definitions-- 在这种情况下 class-- 永远不会改变.

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

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

Answer 1

一般来说，没有理由不在这里使用组合而不是深度继承：

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 实际需要哪些信息来完成它的工作。

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

const Button = (props) => (<button
             onClick={props.onClick}
             className={props.className}
           >
             {props.text}
           </button>);
Button.propTypes = {
      className: React.PropTypes.string.isRequired,
      onClick: React.PropTypes.func
};

const PrimaryButton = (props) =>
    <Button {...props} className="btn btn-primary" />;

const SuccessButton = (props) =>
    <Button {...props} className="btn btn-success" />;

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

顺便说一句，如果你正在尝试制作一些包装 Bootstrap 的 React 组件，那么也许你应该看看 React-Bootstrap.

React.js 中的抽象

Abstraction in React.js

javascript

flux

reactjs

reactjs-flux