如何使用與反應的組分和ES6類繼承

我試圖子類陣營組成部分，我重寫的方法不會被調用：如何使用與反應的組分和ES6類繼承

class Foo extends React.Component { 
    someMethod() { ... } 

    render() { 
    return <div>{this.someMethod()}</div>; 
    } 
} 

class Bar extends Foo { 
    someMethod() { 
    // Never gets called 
    } 
}

事實上，當我呈現在<Bar />我DOM並查看調試器中的組件，它將組件類型顯示爲'Foo'。（請注意，我熟悉關於組合與繼承的所有論點，相信我，繼承對於我的具體用例來說確實是正確答案，所以我們不要開始這個論點。）

（另外，我知道潛在的重複問題#27233491，但鑑於那裏的解決方案實際上並不似乎爲我工作。）

更新：

我看到@亞倫例如在CodePen展示如何這工作，但我看到不同的行爲我我的應用程序。具體做法是：

class Foo extends React.Component { 
    render() { 
    console.log(this); // Always prints 'Foo...'. 
    return <div></div> 
    } 
} 

class Bar extends Foo { 
    render() { 
    console.log(this); // Always prints 'Bar...'. 
    return super.render(); 
    } 
}

我dev的控制檯上看到的，當我使酒吧是：

> Bar { props: ...etc. } 
> Foo { props: ...etc. }

換句話說，第一記錄語句打印「本」爲類型酒吧，和第二一個打印'this'爲Foo類型。兩者都來自同一個render（）調用。

來源

2016-05-17 Talin

什麼是'someMethod'，你期待什麼叫它？ – loganfsmyth

在render（）過程中被調用。我會更新我的例子。 – Talin

[這是CodePen上的工作。]（https://codepen.io/abeall/pen/eZaVbZ） – Aaron

發現問題：我在基類上使用withRouter（）。你不能從HoC繼承，它會像所有的方法一樣調用.bind（this）。

來源

2016-05-17 20:22:36 Talin

如何使用與反應的組分和ES6類繼承

回答

相關問題