渲染后如何获取元素的高度？

Posted 2023-04-14

【中文标题】渲染后如何获取元素的高度？

【英文标题】：How can I get the height of an element after it has rendered?

【发布时间】：2021-12-09 01:55:15

【问题描述】：

我想在渲染元素后获取高度。该元素位于我想要检测的另一个组件内。

我知道我可以这样做：

  const heightOfStepper = document.getElementsByClassName(
    "step-indicator"
  )?.[0]?.offsetHeight;
  
  const minHeight = useMemo(
    () => `calc($heightOfStepperpx + var(--small-spacing))`,
    [heightOfStepper]
  );

但是当我console.log out the heightOfStepper 时，值是0 第一次渲染，如果将一些代码添加到我的 IntelliJ 并保存，那么我得到了步进器的实际高度，从那时起步进器是已安装。

如何在渲染后获取元素的高度，并且该组件位于另一个组件内？ （所以我不能只使用useEffect(() => ..., [])）

【参考方案1】：

在反应中，您应该避免常规的 DOM 查询（例如 getElementsByClassName） - 改用 ref。你是什​​么意思你不能使用useEffect？您甚至可以在深度嵌套的组件中使用它。如果您想获得父元素的高度，您将需要使用forward ref，例如像这样：

// parent component
const App = () => 
  const ref = useRef(null);
  return (
    <div ref=ref>
      MyDiv
      <Child ref=ref />
    </div>
  );
;

// child component
const Child = React.forwardRef((props, ref) => 
  useEffect(() => 
    console.log(ref.current.offsetHeight);
  , []);
  return <p>I'm a child component</p>;
);

如果您发现自己需要通过组件树或例如兄弟姐妹之间-通过上下文传递参考-已回答here