在调用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组件不会更新

回答

相关问题