title: Abstraction in React.js
body: <p>I want to use some abstraction in the creation of my React components. For example:</p>
  
  <pre><code>class AbstractButton extends React.Component {
    render() {
      return (
        &lt;button
          onClick={this.props.onClick}
          className={this.definitions.className}&gt;
          {this.props.text}
        &lt;/button&gt;
      }
  }
  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'
      };
    }
  }
  </code></pre>
  
  <p>I don't want to pass these <code>definitions</code> via <code>props</code> because I know that these <code>definitions</code>--in this case the <code>class</code>--will never change.</p>
  
  <p>Is it an anti-pattern in React? Or is it OK?</p>
  
  <p>My question refers to <a href="https://github.com/altjs/connect-to-stores/issues/2" rel="nofollow">this altjs issue</a>: this kind of abstraction isn't compatible with <code>@connectToStores</code>.</p>