为何forwardRef转发的ref.current获取计算样式时显示undefined？

问题分析 #

你的代码中调用getComputedStyle时el总是undefined，核心原因有两点：

• useEffect未设置依赖数组，会在组件每次渲染时触发，可能在DOM未完全挂载、ref还未完成赋值的时机就执行了
• 没有对ref.current做存在性校验，即使遇到ref未赋值的情况也会直接执行后续逻辑

修复后的代码 #

const Heading = forwardRef(({ children }, ref) => {
  // 标准写法：forwardRef的第二个参数单独接收ref，而非包含在props内
  return <h1 ref={ref}>{children}</h1>;
});

const H = ({ children }) => {
  const headingRef = useRef();

  useEffect(() => {
    const el = headingRef.current;
    // 先确认DOM元素存在，再执行样式获取操作
    if (el) {
      const style = window.getComputedStyle(el);
      console.log(style);
    }
  }, []); // 空依赖数组，确保仅在组件挂载完成后执行一次

  return <Heading ref={headingRef}>{children}</Heading>;
};

关键细节说明 #

• forwardRef参数规范：你原代码中将ref放在props里虽然能运行，但官方标准写法是通过forwardRef的第二个独立参数接收ref，这样更清晰且符合React规范
• useEffect依赖控制：空依赖数组[]会让副作用只在组件挂载完成后执行一次，此时DOM已经渲染完毕，ref已成功绑定到底层的h1元素上
• 兜底校验：添加if (el)判断可以避免极端场景（比如组件卸载后副作用仍触发）导致的报错，提升代码健壮性

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