React：如何獲取來自具有動態高度的子元素的元素的引用高度？

Question

我有一個組件，其中包含一些帶有文本的元素。
基於其他一些東西，文本可以是一些單詞，也可以是一堵文本牆。 從父母那里，我需要隨時知道孩子內部元素的確切高度
我曾嘗試使用回調引用但無濟於事。 我只能得到第一個值，但我需要它來更新

這是代碼的示例。

更新：當我直接檢查高度時我注意到的一件事是我得到了以前的值（有點像當你使用 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]);