使用react-grid-layout时如何获取每个grid-item的ref？

问题根源 #

你直接给子 div 加 Ref 的写法，在大部分情况下能拿到你自己的元素，但如果是要获取 React Grid Layout 生成的布局容器元素（包裹你子元素的外层 grid-item 节点），这种方式就失效了。另外如果 itemsEls 初始化不正确，也会导致 Ref 赋值失败。

解决方案分两种场景 #

场景1：获取你自己定义的子元素 Ref #

首先确保 itemsEls 正确初始化：

// 函数组件用 useRef 初始化空对象
const itemsEls = useRef({});
// 类组件则直接在构造函数里初始化：this.itemsEls = {};

然后修改 Ref 赋值逻辑，加上卸载时的清理，避免内存泄漏：

{eles.map((item) => (
  <div
    key={item.key}
    ref={(el) => {
      if (el) {
        itemsEls.current[item.key] = el;
      } else {
        // 组件卸载时删除对应 Ref，防止内存泄漏
        delete itemsEls.current[item.key];
      }
    }}
  >
    {item.key}
  </div>
))}

场景2：获取 React Grid Layout 生成的布局容器 Ref #

如果需要拿到布局系统生成的外层容器（带 grid-item 类的节点），可以通过以下方式实现：

1. 给 ReactGridLayout 组件本身加 Ref：

const gridRef = useRef(null);

2. 在元素列表更新后，遍历布局容器的子节点，通过 data-key 匹配对应元素：

import { useEffect } from 'react';

useEffect(() => {
  if (!gridRef.current) return;
  
  // 获取所有布局容器节点
  const gridItemNodes = gridRef.current.querySelectorAll('.grid-item');
  gridItemNodes.forEach(node => {
    // React Grid Layout 会把你设置的 key 放到 data-key 属性里
    const itemKey = node.getAttribute('data-key');
    if (itemKey) {
      itemsEls.current[itemKey] = node;
    }
  });
}, [eles]); // 当元素列表变化时重新获取

3. 对应的 ReactGridLayout 代码：

<ReactGridLayout
  ref={gridRef}
  layout={layout}
  {...{
    className: "layout",
    items: 10,
    cols: 8,
    rowHeight: 12,
    verticalCompact: false,
    isDraggable: false,
  }}
>
  {eles.map((item) => (
    // 手动添加 data-key 确保和 key 一致
    <div key={item.key} data-key={item.key}>
      {item.key}
    </div>
  ))}
</ReactGridLayout>

关于你看到的 Stack Overflow 方案原理 #

这类方案核心逻辑就是利用 React Grid Layout 的特性：它会将你给子元素设置的 key 同步到生成的布局容器的 data-key 属性上。通过给整个布局组件加 Ref，就能遍历到所有布局容器节点，再通过 data-key 映射到对应的元素，从而拿到每个布局项的真实 DOM 节点。

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