Javascript 反应JS继承

我对React有疑问，尤其是它共享公共功能的方式。据我所知，首选的方法是使用混合，对吗

我有以下问题：我有一个工具栏和按钮。工具栏是一个React类，每个按钮是一个单独的类。所有按钮共享相同的通用功能：

他们都在init上创建了一些东西

它们都在单击时执行公共操作

我在单个mixin中提取了这个公共功能。对于这两个相似的东西，它有两个功能。我从每个按钮传递mixin中特定于函数的内容。 问题是，我现在有另一个按钮，它不适合在该图片。点击后，它应该做一些完全不同的事情。我不能重用mixin中的第二个功能（处理点击）

当然，我想只在这个按钮中创建一个单独的函数handleClick，它将覆盖mixin中的函数。然而，这似乎是-React禁止重写函数，而不是生命周期的一部分

你能给我一些建议吗？解决这种情况的首选方法是什么？也许要创建两个混音，只是不使用第二个按钮，它不适合普通图片

谢谢，

两个选项（或两个都有！）：

• 创建两个mixin
• 使用handleClick以外的名称

---

在mixin中，您通常需要较少的通用名称

handleClick

非常模糊，您无法立即看到实现，甚至无法知道它来自某个mixin。如果您给它一个更合适的名称，比如

handleToolSelect

，它会更清晰，您可以假装它不存在于不需要它的组件中。

另一个选择是创建一个基本/抽象按钮，由各种特殊类型的按钮（通过组合模式）使用。一个简单的演示

我所做的是创建一个具有基本按钮点击行为的

AbstractButton

。例如，你可以把你所有的按钮都通用的东西放在那里

这样，我创建了第二个类，名为

RealButton1

。它使用

AbstractButton

并处理单击事件（

onClick

）。然后，我创建了一个名为

SecondRealButton

的按钮的第二个专门化。两者的行为可能不同，但仍可以根据需要重用

虽然mixin现在可以工作，但考虑到开始支持EcmaScript 6语法的可能性，它们还没有一条明显的前进道路。另外，在同一篇博文中，您会注意到他们特别提到ES6类没有任何mixin支持

在这种情况下，我不建议使用mixin，因为您（可能）拥有UI组件，并且不尝试为另一个可插拔系统提供扩展模型（例如可能需要路由器或存储/流量/调度类型系统）

var AbstractButton=React.createClass({
道具类型：{
onClick:React.PropTypes.func
},
handleClick:函数（e）{
如果（this.props.onClick）{
this.props.onClick.call（this，e）；
}
},
render:function（）{
返回
{this.props.caption}
;
}        
});
var RealButton1=React.createClass({
道具类型：{
标题：React.PropTypes.string.isRequired
},
render:function（）{
返回；
},
点击：功能（e）{
log（'clicked'+this.props.caption）；
}
});
var SecondRealButton=React.createClass({
道具类型：{
标题：React.PropTypes.string.isRequired
},
render:function（）{
返回；
},
点击：功能（e）{
log（'secondtype clicked'+this.props.caption）；
}    
});
var SampleApp=React.createClass（{
render:function（）{
返回(
);    
}
});
React.render（，document.body）；

好的，可能会有两个混音。谢谢

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