React中useRef绑定组件后current值为undefined的问题

为什么refVar1.current始终为undefined？ #

主要有两个核心原因：

1. 函数组件未通过forwardRef转发Ref #

如果AnimationComponent是函数组件，默认情况下它无法接收父组件传递的ref属性。你需要用React.forwardRef包裹组件，将ref转发到内部的真实DOM元素（比如你组件里的<g>标签）上。

修改AnimationComponent的示例代码：

const AnimationComponent = React.forwardRef((props, ref) => {
  return <g ref={ref}>{/* 组件内部元素 */}</g>;
});

如果是类组件，默认支持ref绑定，除非组件内部有特殊逻辑（比如自定义shouldComponentUpdate导致渲染异常）。

2. SVG元素嵌套不符合规范 #

你在<path>标签内部放置了AnimationComponent，但SVG的<path>元素仅允许包含SVG原生动画元素（如<animate>、<animateTransform>），不能直接嵌套自定义组件。这种错误嵌套会导致AnimationComponent无法被正确渲染，自然ref也无法完成绑定。

修正后的return结构示例：

return(
  <g>
    <path d="你的路径属性" />
    <AnimationComponent ref={refVar1} />
  </g>
)

关于React执行流程的解答 #

你的理解存在偏差，正确的执行顺序是：

1. 父组件函数执行：创建refVar1（此时refVar1.current为undefined）。
2. React渲染JSX并构建虚拟DOM，随后将真实DOM渲染到页面：
   • 若AnimationComponent正常渲染，React会在这一步将组件实例或内部DOM元素赋值给refVar1.current。
3. 页面DOM更新完成后，执行空依赖的useEffect：此时refVar1.current应该已经有值（前提是前面的问题已修复）。

所以useEffect一定会执行，你之前看到current为undefined，完全是组件未正确渲染或ref未转发导致的，和useEffect的执行时机无关。

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