react 关于为什么useRef()，ref.current获取元素的高度为0，宽度也为0

react 为什么useRef()获取元素的高度0

如果 contentRef?.current?.clientHeight 返回 0，那很可能是因为你在检查高度之前的元素仍然处于隐藏状态。在元素处于隐藏状态时，通常会无法获取其可见高度。
一种常见的解决方案是等到元素显示后再获取其高度。你可以通过使用 useEffect 监听元素的显示/隐藏状态，并在元素显示时获取其高度。

import React, { useEffect, useRef, useState } from 'react';

const Component = () => {
  const [visible, setVisible] = useState(false);
  const contentRef = useRef(null);

  useEffect(() => {
    if (visible && contentRef.current) {
      const height = contentRef.current.clientHeight;
      console.log('元素高度：', height);
    }
  }, [visible]);

  const handleClick = () => {
    setVisible(!visible);
  };

  return (
    <div>
      <button onClick={handleClick}>{visible ? '隐藏' : '显示'}</button>
      {visible && <div ref={contentRef}>组件内容</div>}
    </div>
  );
};

在上述示例中，我们添加了一个 visible 状态来追踪元素的显示/隐藏状态，并根据该状态在 JSX 中决定是否渲染元素。useEffect 钩子监视 visible 状态的变化，并在元素显示后获取其高度。

使用此方法，在元素处于隐藏状态时，clientHeight 将不会被访问或计算。只有当元素显示时，高度才会被正确地获取。

如果你需要在元素显示之前即获取其高度，请确保元素已正确加载和呈现，并且它的可见性已被正确设置。这可以通过 CSS 类、内联样式或其他方式实现。