首页 > 解决方案 > React:如何从具有动态高度的子项中获取元素的参考高度?

问题描述

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

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

这是代码的示例。


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

小时(高度:~60),反之
大时显示~100

标签: javascriptreactjsreact-ref

解决方案


当我直接检查高度时,我注意到的一件事是我得到了以前的值

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

你能做的就是利用useEffect. 当组件完成渲染时(在类实现中相当于 this componentDidUpdate),即开始检查它的高度。

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

编辑确定-panini-4oxmz


推荐阅读