1
より柔軟なアプローチを取るためにReactコードをリファクタリングしています。render（）が呼び出された後にExtended 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は、COMを作るためにthis.componentsの一部をオーバーライドすることができますponents pluggable。これは次のように起こる：
FooTable：
constructor(...args) {
super(...args);
this.components.tableHead: FooHead
}
}
class FooHead extends TableHead {} // FooHead <- TableHead <- React.Component
目標は、（現実にはもっと複雑である）表を作成するプラグイン可能なシステムです。
ここで問題となるのは、FooTableの小道具が変更されると、TableHeadまでのすべてのイベントが呼び出されていてもDOMの更新は表示されないということです。抽象化の前にすべてがうまくいくように見えました。
これはどのように可能ですか？これをどのように解決できますか？
あなたは 'extends'を使う代わりに上位コンポーネントを使うことを考えましたか？それとも、それはちょうど普通の成分組成ですか？ – azium
ええと、矢印関数で宣言されていない場合、 'render（）{}'の中でセクションを 'return'する必要はありませんか？ –
[Reactコンポーネントの拡張]（http://stackoverflow.com/questions/25720595/extending-react-js-components）と[コンポーネントのサブクラス化]（https://discuss.reactjs.org/t/best）の2つのリンクを試してください。 -practices-for-extend-subclassing-components/1820）を参照してください。それらは構成のベストプラクティスの良い例です。 –