在調用render（）後，擴展React組件不會更新

我正在重構一些React代碼以使其具有更靈活的方法。在調用render（）後，擴展React組件不會更新

我有一個擴展React.Component的抽象組件，比如說class ATable extends React.Component。
另一個表擴展了此表所示：class FooTable extends ATable
一些其它表不相同：class BarTable extends ATable
的（摘要）ATable部件有一個構造方法，其提供的綁定到其他組件：

ATable ：

constructor(...args) { 
    super(...args); 
    this.components = { 
     tableHead: TableHead, // other (semi) abstract classes 
     tableBody: TableBody, 
     tableRow: TableRow, 
     (...) 
    } 
} 

render() { 
    <section> 
     <this.components.tableHead (...) /> 
     (...) 
    </section> 
}

FooTable可以覆蓋一些this.components使融爲一體插件可插拔。出現這種情況是這樣的：

FooTable：

constructor(...args) { 
    super(...args); 
     this.components.tableHead: FooHead 
    } 
} 

class FooHead extends TableHead {} // FooHead <- TableHead <- React.Component

我們的目標是使表（這在現實中是比較複雜的）一個可插拔的體系。

這裏的問題是，如果FooTable的道具改變，render（）事件一直到TableHead被調用，但沒有DOM更新可見。在抽象之前，一切似乎都行得通。

這怎麼可能，我該如何解決這個問題？

來源

2016-05-12 Sven van de Scheur

你有沒有考慮過使用高階組件而不是使用'extends'？或者，就此而言，只是正常的組件構成？ – azium

嗯，如果沒有用箭頭函數聲明，你不需要'render（）{}'裏面的'return'節嗎？ –

嘗試這兩個鏈接[擴展React組件]（http://stackoverflow.com/questions/25720595/extending-react-js-components）和[子類化組件]（https://discuss.reactjs.org/t/best -practices換延伸-子類成分/ 1820）。他們是作曲最佳實踐的好例子。 –

原來，問題不是類的擴展，但我試圖重構......被那個渲染

不留神部分被設置在構造函數鏈中的狀態。這當然不會更新。

結果是組件註冊了一個道具變更，稱爲整個生命週期（我可以在渲染上記錄新的道具），但由於從未應用到狀態的道具仍然沒有變化。

隨着固定現在一切正常。

來源

2016-05-12 17:25:27

在調用render（）後，擴展React組件不會更新

回答

相關問題