React JS繼承

Question

我對React有疑問，尤其是它應該共享通用功能的方式。從我讀到的，最好的方法是使用混合，對嗎？

我有以下問題：我有一個工具欄和按鈕。工具欄是一個React類，每個Button都是一個單獨的類。所有按鈕都具有相同的通用功能：

1. 它們都在init上創建了一些東西。
2. 他們都對點擊執行常見操作。

我在單個mixin中提取了這個通用功能。它對這兩個相似的事物有兩個功能。我從每個按鈕傳遞特定於混音功能的內容。 問題是，我現在有另一個按鈕，不適合在該圖片。點擊時，它應該做一些完全不同的事情。我無法重新使用mixin的第二個功能（處理點擊）。

當然，我想創建一個單獨的函數handleClick只在這個按鈕中，它將覆蓋mixin中的一個。但是，看起來這是not possible - 反應禁止覆蓋功能，而不是生命週期的一部分。

你會給我一些建議什麼是解決這種情況的首選方法？也許創建兩個mixin，只是不使用第二個不適合普通圖片的按鈕？

感謝，

Answer 1

另一個選項而不是mixin是創建一個基本/抽象按鈕，由各種特殊類型的按鈕（通過構圖模式）使用。 Here's一個簡單的演示。

我所做的是創建一個具有基本按鈕點擊行爲的AbstractButton。例如，您可以將所有按鈕共同的東西放在那裏。由此我創建了第二個類RealButton1。它使用AbstractButton並處理單擊事件（onClick）。然後，我創建了一個名爲SecondRealButton的按鈕的第二個特化。兩者都可以有不同的表現，但仍然可以根據需要重複使用。

雖然mixins今天工作，但是他們還沒有明確的路徑，但recent announcements開始支持EcmaScript 6語法。同樣，從同一篇博客文章中，你會注意到他們特別提到ES6類沒有任何混合支持。

在這種情況下，我不會推薦使用mixin（大概）擁有UI組件，也不會嘗試爲其他可插入系統提供擴展模型（例如可能需要使用路由器或商店/通量/調度器類型系統）。

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

兩個選項（或兩者）：

• 創建兩個混入
• 使用比handleClick以外的名稱

在混入通常要小於通用名。​​非常含糊，你不能立即看到實現，甚至不知道它來自某個混合。如果你給它一個更合適的名稱，如handleToolSelect，它會更清晰，你可以假裝它不存在於你不需要它的組件中。