React中如何通过Hooks或其他方式为嵌套数组元素设置多ref

针对嵌套数组的元素引用获取场景，只需要把单层ref数组调整为和数据结构匹配的二维数组，按层级索引存储对应DOM引用即可，具体实现如下：

核心实现逻辑 #

• 初始化ref时直接生成二维数组结构，外层长度和父级数组长度对齐
• 遍历渲染时，通过回调ref的方式，按照「父级索引-子级索引」的二维坐标，把对应子元素DOM存入ref数组
• 不要在循环渲染中使用createRef，每次重渲染它都会生成新的ref实例，会丢失已存储的DOM引用，直接用生命周期稳定的useRef即可

可直接运行的示例代码 #

const { useRef, useState, useEffect } = React;

const arr1 = [A, B, C]
const arr2 = [1, 2, 3]

const App = () => {
  // 初始化二维ref数组，和父级数组长度对齐
  const popoverRefs = useRef(arr1.map(() => []));

  useEffect(() => {
    // 可直接通过索引获取任意子元素：比如第一个父元素下第二个子元素为 popoverRefs.current[0][1]
    console.log('所有子元素DOM引用：', popoverRefs.current)
  }, [])

  return (
    <div>
      {arr1.map((parentItem, parentIndex) => {
        return(
          <div key={parentItem.id ?? parentIndex}>
            A Parent Element {parentItem.label}
            {arr2.map((childItem, childIndex) => {
              return (
                <div 
                  key={childItem.id ?? childIndex}
                  // 按二维索引存储对应子元素DOM
                  ref={node => popoverRefs.current[parentIndex][childIndex] = node}
                >
                  A Child Element {childItem.label}     
                </div>
              )
             })}
          </div>
        )
      })}
    </div>
  );
};

ReactDOM.render(
  <App />,
  document.getElementById("root")
);

使用说明 #

后续需要锚定弹出层时，直接通过索引取出对应DOM节点传入锚点配置即可，比如要给第2个父级下的第3个子元素绑定popover，直接取popoverRefs.current[1][2]就能拿到目标节点。如果子数组长度是动态变化的，记得及时清理ref数组中已经卸载的节点引用，避免无效内存占用。

内容的提问来源于stack exchange，提问作者Parag Pawar