Question

我对React有疑问，特别是它应该分享共同功能的方式。从我读到的，首选的方法是使用混音，对吗？

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

他们都在init上创建了一些东西。
他们都会在点击时执行常见操作。

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

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

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

谢谢，

Answer 1

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

我所做的是创建一个具有基本按钮点击行为的AbstractButton。例如，您可以将所有按钮的常用内容放在那里。

有了这个，我创建了第二个名为RealButton1的类。它使用AbstractButton并处理点击事件（onClick）。然后，我创建了一个名为SecondRealButton的按钮的第二个特化。两者都可以表现不同，并且在必要时仍然可以重复使用。

虽然mixins今天起作用，但由于recent announcements开始支持EcmaScript 6语法，因此没有明显的前进路径。另外，在同一篇博客文章中，您会注意到他们特别提到ES6类没有任何mixin支持。

在这种情况下，我不推荐使用mixin，因为你（可能）拥有UI组件，并且没有尝试为另一个可插拔系统提供扩展模型（例如可能需要使用路由器或商店） / flux / dispatcher type system。

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

Answer 2

两个选项（或两者兼而有之！）：

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

在mixins中，您通常需要较少的通用名称。 handleClick非常模糊，你无法立即看到实现，甚至不知道它来自某个mixin。如果你给它一个更合格的名字，如handleToolSelect，它会更清晰，你可以假装它不存在于你不需要它的组件中。

React JS继承

2 个答案: