Question

我正在重构一些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的props更改，则会调用render（）事件一直到TableHead，但是没有DOM更新可见。在抽象之前，一切似乎都正常。

这怎么可能，我该如何解决？

Answer 1

原来问题不是类的扩展，而是我试图重构......

意外地，渲染的部件被设置为构造函数链中的状态。当然，这不会得到更新。

结果是组件注册了一个道具更改，称为整个生命周期（我可以在渲染时记录新的道具）但仍然没有变化，因为道具从未应用于状态。

通过修复，现在一切正常。

调用render（）后，扩展的React组件不会更新

1 个答案: