React中useRef无法获取DOM元素问题求助

核心问题 #

useRef创建的引用对象本身是不变的（组件生命周期内始终是同一个对象），所以你把product2作为useEffect的依赖项，它永远不会触发回调——因为这个对象本身没变化，哪怕product2.current的值更新了。

修复步骤 #

1. 调整useEffect的依赖项 #

把依赖项改成空数组，让useEffect在组件挂载完成后执行一次，此时DOM元素已经渲染，product2.current会正确指向目标div：

const product2 = useRef(null);

useEffect(() => {
  console.log('LOGGING REFS', product2.current);
  // 这里可以安全操作DOM，比如添加动画类
  if (product2.current) {
    product2.current.classList.add('animate-fade-in');
  }
}, []); // 空数组表示仅挂载时执行

return (
  <div className='mb-[40px]' ref={product2}>
      <h6 className='font-semibold'>Product 2</h6>
  </div>
);

2. 监听DOM元素变化（可选） #

如果需要在DOM元素更新后重新执行动画（比如组件状态变化导致该div重新渲染），可以结合useEffect监听相关状态，或者使用useCallback配合ref的回调形式：

const [isVisible, setIsVisible] = useState(false);

const productRef = useCallback((node) => {
  if (node) {
    console.log('DOM元素已挂载/更新', node);
    // 执行动画逻辑
    node.classList.toggle('animate-fade-in', isVisible);
  }
}, [isVisible]); // 监听isVisible状态变化

return (
  <div className='mb-[40px]' ref={productRef}>
      <h6 className='font-semibold'>Product 2</h6>
  </div>
);

关键知识点 #

• useRef的current属性更新不会触发组件重新渲染，也不会触发依赖于useRef对象的useEffect。
• 组件挂载完成后（useEffect空数组依赖），ref的current才会指向真实DOM元素，之前都是null。
• 若需响应DOM元素的动态变化，优先使用回调式ref或结合状态监听。

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