React：如何使用动态高度获取来自 children 的元素的参考高度？

Question

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

这是代码示例。

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

小的时候（身高：~60）显示~100
反之大

Answer 1

one thing that I notice when I check directly the height is that I get the previous value

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

你能做的就是利用useEffect。当组件完成渲染时（在 class 实现中相当于 componentDidUpdate），即开始检查其高度时。

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

React: How to get the ref height of an element coming from the children with dynamic height?