React：如何从具有动态高度的子项中获取元素的参考高度？

Question

我有一个组件，其中包含一些带有文本的元素。
基于其他一些东西，文本可以是一些单词，也可以是一堵文字墙。从父母那里，我需要随时知道子元素内部元素的确切高度
我曾尝试使用回调引用但无济于事。我只能得到第一个值，但我需要它来更新

https://codesandbox.io/s/nervous-mendeleev-xf2cg?file=/src/App.js

这是代码示例。

---

更新：当我直接检查高度时，我注意到的一件事是我得到了以前的值（有点像你使用 setState 并且没有意识到它是异步的）

当很小（高度：~60）时，它显示~100
反过来大的时候

Answer 1

当我直接检查高度时，我注意到的一件事是我得到了 上一个值

您仍然可以挽救此解决方案。它正在获取先前的值，因为您正在立即检查高度，但问题是组件未使用新的 words 完成渲染（即，参考高度仍将返回先前的高度）。

您可以做的是利用useEffect。当组件完成渲染时（在类实现中相当于 componentDidUpdate），即开始检查它的高度。

useEffect(() => {
  // the component is done rendering - now you can check for its new height here
}, [words, onClick]);