javascript - React JS继承

我对React有疑问，尤其是关于它应该共享通用功能的方式。根据我的阅读，首选方式是使用混合，对吗？
我有以下问题:我有一个工具栏和按钮。工具栏是一个React类，每个Button是一个单独的类。所有按钮共享相同的通用功能:

它们都在init上创建一些东西。

它们都在单击时执行常见操作。

我在单个mixin中提取了此常见功能。对于这两个相似的事物，它具有两个功能。我从每个按钮传递了mixin中特定于功能的内容。
问题是我现在有另一个按钮不适合该图片。单击时，它应该执行完全不同的操作。我无法重用mixin的第二个功能(处理点击)。
当然，我想只在此按钮中创建一个单独的功能handleClick，它将覆盖mixin中的那个。但是，这似乎是not possible-React禁止覆盖函数，而不是生命周期的一部分。
您能否给我一些建议来解决这种情况？也许要创建两个mixins，而只是不使用第二个mixins来适应普通图片？
谢谢，

最佳答案

除了mixins之外，另一种选择是创建一个基本/抽象按钮，供各种特殊类型的按钮使用(通过合成模式)。 Here's一个简单的演示。

我所做的是创建一个具有基本按钮单击行为的AbstractButton。例如，您可以在其中放置所有按钮共有的内容。

这样，我创建了第二个类RealButton1。它使用AbstractButton并处理click事件(onClick)。然后，我创建了名为SecondRealButton的按钮的第二种特殊化。两者的行为可能不同，但仍可根据需要重用。

尽管mixins可以在今天工作，但是鉴于recent announcements开始支持EcmaScript 6语法，对于它们来说，前进的道路并不明显。此外，从同一篇博客文章中，您会注意到他们是如何特别提到ES6类没有任何混合支持的。

在这种情况下，我不建议您使用mixin，因为您(大概)拥有UI组件，并且不尝试为另一个可插拔系统提供扩展模型(例如，可能需要使用路由器或store / flux /调度员类型系统)。

var AbstractButton = React.createClass({
    propTypes: {
        onClick: React.PropTypes.func
    },
    handleClick: function(e) {
        if (this.props.onClick) {
            this.props.onClick.call(this, e);
        }
    },
    render: function() {
       return <button onClick={this.handleClick}>
                 {this.props.caption}
              </button>;
    }
});

var RealButton1 = React.createClass({
    propTypes: {
        caption: React.PropTypes.string.isRequired
    },

    render: function() {
        return <AbstractButton
                  onClick={ this.clicked }
                  caption={ this.props.caption } />;
    },

    clicked: function(e) {
        console.log('clicked ' + this.props.caption);
    }

});

var SecondRealButton = React.createClass({
    propTypes: {
        caption: React.PropTypes.string.isRequired
    },

    render: function() {
        return <AbstractButton onClick={ this.clicked }
                caption={ this.props.caption } />;
    },

    clicked: function(e) {
        console.log('second type clicked ' + this.props.caption);
    }
});

var SampleApp = React.createClass({
    render: function() {
        return (<div>
                <RealButton1 caption="button 1" />
                <RealButton1 caption="button 2" />
                <SecondRealButton caption="other type button #1" />
            </div>
        );
    }
});

React.render(<SampleApp />, document.body);