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

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

回答与解析：

在 React 中，若需获取多个动态生成子组件（或 DOM 元素）的引用，不能直接将同一个 useRef 对象赋给多个元素，因为 useRef 创建的是单一引用。正确做法是使用一个 ref 数组或对象来分别存储每个子元素的 ref。

推荐方式是结合 useCallback 和 useRef 创建一个动态 ref 容器。例如：

import { useRef, useCallback } from 'react';

function ParentComponent({ items }) {
  const itemRefs = useRef([]);

  const setItemRef = useCallback((index) => (el) => {
    itemRefs.current[index] = el;
  }, []);

  return (
    <div>
      {items.map((item, index) => (
        <div key={item.id} ref={setItemRef(index)}>
          {item.name}
        </div>
      ))}
    </div>
  );
}

解析：

• useRef() 创建一个可变对象 itemRefs.current，用于保存多个 DOM 引用。
• useCallback 用于生成一个稳定的函数 setItemRef，避免每次渲染都创建新函数。
• setItemRef(index) 返回一个闭包函数，该函数在 React 挂载/卸载 DOM 时被调用，将对应索引的元素存入 itemRefs.current。
• 使用 key 确保 React 能正确追踪每个元素的身份，避免 ref 错乱。

这种方式避免了使用 useRef 直接赋值给多个元素导致的覆盖问题，也比使用 createRef() 在每次渲染时创建新 ref 更高效。