让React.js了解vanilla JavaScript DOM更新

Question

假设我在React 16应用程序中有这种组件层次结构：

组件 A 由 B 和 C

组件组成

这些组件由具有一些非零高度的块HTML元素表示。

在 B 组件componentDidMount中我使用vanilla JavaScript来查找折叠元素的高度。这使得底层DOM变异。

在组件 C 的componentDidMount方法中我还使用vanilla JS来了解组件顶部的偏移 B 和 C

我知道这两个组件的偏移量可以相同，但在我的初始版本的代码中它是相同的。在setTimeout中包装偏移计算函数后，我得到了很好的测量结果。

setTimeout(() => {this.calculateElementsOffset()}, 100)

有没有办法在组件B中排列完成排列，这样我就不会在组件C中使用setTimout调用神奇的100 ms？

Answer 1

听起来组件C需要知道组件B状态。而不是使用vanilla JS更新DOM使用反应来做到这一点。计算componentDidMount中组件B所需的高度，然后将该值保存到state。在样式属性中使用此新状态值可为需要它的元素提供高度，并将此值作为prop传递给组件C.通过使用setState存储值，可以确保组件将更新。