javascript - 让 React.js 了解原生 JavaScript DOM 更新

Question

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

组件A由组件B和C组成

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

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

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

我知道这两个组件的偏移量不能相同，但在我最初的代码版本中是相同的。在将偏移量计算功能包裹起来后，setTimeout我得到了很好的测量结果。

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

有没有办法对组件 B 中的排列进行连线整理，所以我不会setTimout在组件 C 中使用带有神奇100ms 的调用？

Answer 1

听起来组件 C 需要了解组件 B 的状态。与其使用原生 JS 更新 DOM，不如使用 react 来这样做。在 componentDidMount 中计算组件 B 所需的高度，然后将该值保存到 state。在样式属性中使用这个新的状态值来为需要它的元素提供高度，并将这个值作为道具传递给组件 C。通过使用 setState 来存储值，您可以确保您的组件会更新。