我正在重构一些React代码以获得更灵活的方法 .
-
我有一个扩展React.Component的抽象组件，比方说
class ATable extends React.Component. -
另一个表扩展了这个表，如下所示：
class FooTable extends ATable -
其他一些表也是如此：
class BarTable extends ATable -
（抽象）ATable组件有一个构造函数方法，它提供与其他组件的绑定：
一张 table ：
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的props更改，则会调用render（）事件一直到TableHead，但是没有DOM更新可见 . 在抽象之前，一切似乎都运行正常 .
这怎么可能，我该如何解决这个问题？
1 回答
事实证明问题不是类的扩展，而是我试图重构...
意外地，渲染的部分被设置为构造函数链中的状态 . 这当然不会更新 .
结果是组件注册了一个道具更改，称为整个生命周期（我可以在渲染时记录新的道具）但仍然没有变化，因为道具从未应用于该状态 .
有了这个修复现在一切正常 .