React中useRef在useEffect内取值为undefined及forwardRef问题

问题核心原因 #

你遇到的问题本质是：forwardRef 仅负责传递 ref 引用，但子组件未将该 ref 绑定到具体的 DOM 元素上；同时父组件的 useEffect 依赖设置不合理，导致无法在 DOM 渲染完成的时机获取到有效 ref。

修复方案 #

1. 子组件绑定 ref 到目标 DOM 元素 #

修改 PostContainer 代码，将 forwardRef 接收的 ref 直接绑定到需要引用的 DOM 节点上：

import { forwardRef } from "react";

const PostContainer = forwardRef((props, ref) => {
  // 将 ref 绑定到实际的 div 元素
  return <div ref={ref}>This is Container</div>
})

export default PostContainer

2. 父组件在正确时机访问 ref #

父组件中，useEffect 无需依赖 postContainerRef（ref 对象本身是稳定不变的），使用空数组依赖即可确保在组件挂载完成、DOM 渲染完毕后执行回调，此时 ref 已完成绑定：

import { useEffect, useRef } from "react";
import PostContainer from "./postContainer.jsx"

export function App(props) {
  const postContainerRef = useRef()
  
  useEffect(() => {
    console.log(postContainerRef.current) // 现在可正常输出目标 DOM 元素
  }, []) // 空数组表示仅在组件挂载完成后执行一次

  return (
    <div className='App'>
      <h1>Hello React.</h1>
      <PostContainer 
        ref={postContainerRef}
        some_prop={"meow"} 
      />
    </div>
  );
}

子组件内部监听 ref 绑定时机 #

如果需要在子组件内确认 ref 绑定完成，同样可以使用空数组依赖的 useEffect：

const PostContainer = forwardRef((props, ref) => {
  useEffect(() => {
    console.log(ref.current) // 输出已绑定的 DOM 元素
  }, [])
  
  return <div ref={ref}>This is Container</div>
})

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