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

【问题标题】：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(${heightOfStepper}px + var(--small-spacing))`,
    [heightOfStepper]
  );

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

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

【问题讨论】：

标签： html reactjs

【解决方案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

【讨论】：