React Ref获取HTML元素高度始终为0的问题求助

问题原因 #

你当前的轮询方案存在两个核心问题：

• 轮询时机不可控：setTimeout的回调执行时，元素可能还未完成布局重排，导致获取到的clientHeight是旧值；
• 依赖项不合理：effect仅依赖checkCompnent触发，元素尺寸变化时无法及时触发查询，只能被动等待下一次轮询。

控制台手动查询能拿到正确高度，是因为你查询时元素已经完成了所有布局更新，而effect的轮询回调刚好赶在布局完成前执行。

解决方案 #

推荐使用ResizeObserver监听元素尺寸变化，这是React生态中监听元素尺寸的标准做法，比轮询更高效、准确：

优化后的代码 #

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

const YourComponent = () => {
  const [containerHeight, setContainerHeight] = useState(200);
  const stickyContainerRef = useRef(null);

  useEffect(() => {
    const observer = new ResizeObserver((entries) => {
      const { clientHeight } = entries[0].target;
      // 只有当高度大于0时才更新状态，避免初始0值的干扰
      if (clientHeight > 0) {
        setContainerHeight(clientHeight);
        // 拿到高度后可以停止监听
        observer.disconnect();
      }
    });

    if (stickyContainerRef.current) {
      observer.observe(stickyContainerRef.current);
    }

    return () => {
      observer.disconnect();
    };
  }, []);

  return (
    <div id="whynotworky" ref={stickyContainerRef}>
      {/* 你的元素内容 */}
    </div>
  );
};

若坚持使用轮询方案 #

改用useLayoutEffect替代useEffect，确保在DOM布局完成后再查询高度，同时增加检查逻辑避免不必要的状态更新：

import { useState, useLayoutEffect, useRef } from 'react';

const YourComponent = () => {
  const [containerHeight, setContainerHeight] = useState(200);
  const [checkComponent, setCheckComponent] = useState(0);
  const stickyContainerRef = useRef(null);

  useLayoutEffect(() => {
    const timer = setTimeout(() => {
      const element = stickyContainerRef.current;
      if (!element) return;

      const height = element.clientHeight;
      console.log('当前高度:', height, '元素ID:', element.id);

      if (height > 0) {
        setContainerHeight(height);
      } else {
        setCheckComponent(c => c + 1);
      }
    }, 1000);

    return () => clearTimeout(timer);
  }, [checkComponent]);

  return (
    <div id="whynotworky" ref={stickyContainerRef}>
      {/* 你的元素内容 */}
    </div>
  );
};

额外说明 #

• 你的顾虑是对的，不建议用document.getElementById，React的Ref机制是更符合组件化思想的DOM操作方式；
• React 17中Ref的current会在元素更新后同步更新，不存在"设置后不再更新"的问题，你之前的问题完全是时机和监听方式的问题。

内容的提问来源于stack exchange，提问作者HMR