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

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

回答：
在 React 中，若需获取动态生成的多个子组件或 DOM 元素的引用，应使用一个对象或数组配合 useRef，并通过 ref 回调函数或函数式 ref 为每个元素分配唯一的引用。

解析：

1. 不推荐的方式：直接为每个元素创建独立的 useRef 变量——这在动态列表中不可行，因为数量不确定。

2. 推荐方式：使用一个 useRef 对象存储多个 ref，例如：

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

   或使用索引（如果 key 是稳定且唯一的）：

   ref={(el) => (itemRefs.current[index] = el)}
   

3. 注意事项：

   • 确保 key 值稳定（不要用 index 作为 key，除非列表静态），否则 ref 可能指向错误的元素。
   • 如果子组件是自定义组件（非原生 DOM），需配合 forwardRef 将 ref 透传到内部 DOM 节点。
   • 不要直接修改 ref.current 的结构（如 push/pop），而应整体赋值或使用 Map 结构管理。

这种方式既能动态管理多个引用，又符合 React 的不可变性和渲染机制。