React JS继承

Question

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

我有以下问题:我有一个工具栏和按钮.工具栏是一个React类,每个Button都是一个单独的类.所有按钮共享相同的常用功能:

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

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

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

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

谢谢,

Answer 1

另一个选项而不是mixins是创建一个基本/抽象按钮,由各种特殊类型的按钮(通过组合模式)使用.这是一个简单的演示.

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

有了这个,我创建了第二个叫做的类RealButton1.它使用AbstractButton并处理click事件(onClick).然后,我创建了一个名为的按钮的第二个特化SecondRealButton.两者都可以表现不同,并且仍然可以根据需要重复使用.

虽然mixins今天工作,但鉴于最近宣布开始支持EcmaScript 6语法,它们还没有明显的前进路径.另外,从同一篇博客文章中,您会注意到他们如何特别提到ES6类没有任何mixin支持.

在这种情况下,我不建议使用mixin,因为您(可能)拥有UI组件,并且没有尝试为另一个可插拔系统提供扩展模型(例如可能需要使用路由器或存储/ 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);