React JS 继承

Question

我对 React 有疑问，尤其是它应该共享通用功能的方式。根据我的阅读，首选方法是使用混合，对吗？

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

他们都在 init 上创建了一些东西。
它们都在点击时执行共同的操作。

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

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

你能给我一些建议吗？解决这种情况的首选方法是什么？也许创建两个 mixin 并且只是不将第二个用于不适合普通图片的按钮？

谢谢，

Answer 1

两个选项（或两个！）：

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

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

Answer 2

另一种选择而不是 mixins 是创建一个 base/abstract 按钮，供各种特殊类型的按钮使用（通过组合模式）。 Here's 一个简单的演示。

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

据此，我创建了第二个 class，名为 RealButton1。它使用 AbstractButton 并处理点击事件 (onClick)。然后，我创建了一个名为 SecondRealButton 的按钮的第二个专业化。两者的行为可能不同，但仍可根据需要重复使用。

虽然今天 mixin 可以工作，但考虑到 recent announcements 开始支持 EcmaScript 6 语法，它们还没有明显的前进道路。此外，在同一个博客 post 中，您会注意到他们是如何特别提到没有对 ES6 classes 的任何混合支持。

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

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

React JS 继承

React JS inheritance

javascript

reactjs