如何解决反应:如何从具有动态高度的子级获得元素的参考高度?
我有一个包含一些带有文本元素的组件。
基于其他内容,文本可以是某些单词,也可以是一堵墙。从父母那里,我需要随时知道孩子内部元素的确切高度
我尝试使用回调引用,但无济于事。我只能得到第一个值,但随后我需要它来更新
https://codesandbox.io/s/nervous-mendeleev-xf2cg?file=/src/App.js
这是代码示例。
更新:当我直接检查高度时,我注意到的一件事是我得到了先前的值(有点像当您使用setState并没有意识到它是异步的)
当小(高度:〜60)时,显示为〜100
反之亦然
解决方法
当我直接检查身高时我注意到的一件事是我得到了 以前的值
您仍然可以挽救该解决方案。之所以得到先前的值,是因为您正在立即检查高度,但是问题在于该组件未使用新的words
完成渲染(即,参照高度仍将返回先前的高度)。>
您可以做的是利用useEffect
。完成组件渲染后(类实现中的等效项为componentDidUpdate
),即开始检查其高度时。
useEffect(() => {
// the component is done rendering - now you can check for its new height here
},[words,onClick]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。