如何在 React 中正确地使用 useRef 来获取动态生成的多个子组件的 DOM 节点引用？

如何在 React 中正确地使用 useRef 来获取动态生成的多个子组件的 DOM 节点引用？

在 React 中，若需获取多个动态生成子组件的 DOM 引用，应使用 useRef 配合回调函数或创建 ref 数组，而不是直接为每个元素分配同一个 ref。具体做法如下：

方法一：使用 ref 回调函数

import { useRef, useEffect } from 'react';

function Parent() {
  const itemRefs = useRef([]);

  useEffect(() => {
    // 此时 itemRefs.current 包含所有 DOM 节点
    console.log(itemRefs.current);
  }, []);

  const items = ['A', 'B', 'C'];

  return (
    <div>
      {items.map((item, index) => (
        <div
          key={item}
          ref={(el) => (itemRefs.current[index] = el)}
        >
          {item}
        </div>
      ))}
    </div>
  );
}

方法二：使用 useRef 创建 ref 数组（推荐）

import { useRef, useEffect } from 'react';

function Parent() {
  const items = ['A', 'B', 'C'];
  const itemRefs = useRef(items.map(() => React.createRef()));

  useEffect(() => {
    itemRefs.current.forEach((ref, index) => {
      console.log(`Item ${index}:`, ref.current);
    });
  }, []);

  return (
    <div>
      {items.map((item, index) => (
        <div key={item} ref={itemRefs.current[index]}>
          {item}
        </div>
      ))}
    </div>
  );
}

解析：

• 不能直接将同一个 useRef 对象分配给多个元素，否则只会保留最后一个元素的引用。
• 方法一通过回调函数动态将每个元素赋值到 ref 数组的对应索引位置，适用于函数组件。
• 方法二使用 React.createRef() 为每个元素创建独立的 ref 对象，更直观但略显冗余。
• 注意：ref 数组本身不应放在组件状态或每次渲染重新创建，应使用 useRef 保证引用稳定。
• 若子组件是自定义组件而非原生 DOM 元素，需在子组件上使用 forwardRef 才能正确转发 ref。