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

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

回答：
在 React 中，若需获取多个动态生成子组件的 DOM 引用，可以使用 useRef 配合回调函数（callback ref）或 useRef 数组的方式。推荐做法是创建一个 ref 数组，在渲染列表时为每个子元素分配一个 ref。

示例代码：

import { useRef, useEffect } from 'react';

function Parent() {
  const items = ['A', 'B', 'C'];
  const itemRefs = useRef([]);

  useEffect(() => {
    // 访问所有 DOM 节点
    itemRefs.current.forEach((el, index) => {
      if (el) console.log(`Item ${index}:`, el);
    });
  }, []);

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

解析：

• useRef([]) 创建一个持久化的数组容器，用于存储多个 DOM 引用。
• 在 ref 属性中使用回调函数 (el) => (itemRefs.current[index] = el)，确保每次渲染都能正确更新对应索引的引用。
• 避免直接使用 useRef() 在 map 中创建多个独立 ref 变量，因为这会导致闭包和状态管理混乱。
• 注意：若列表顺序可能变化（如排序、过滤），应谨慎使用索引作为 key 或 ref 索引，否则可能导致引用错乱。更稳健的方式是结合唯一 ID 管理 refs（如使用 Map 存储）。