如何给 React Grid 布局的 Grid Items 一个参考

Question

我正在尝试使用动态引用数组。这些引用将来自从列表映射到网格布局元素的网格项。

这是我的代码：

<GridLayout
                        layout = {layout}
                        onLayoutChange={(currentLayout) => {onLayoutChange(currentLayout)}}
                        onDragStop={currentLayout => onDragStop(currentLayout)}
                        onDropDragOver={onDropDragOver}
                        onDrop={(currentLayout,item,_event) => onDrop(item,_event)}
                        onResizeStart={(layout, oldItem, newItem, placeholder, event, element) => {setConfigValues(oldItem.i)}}
                        onResize={(layout, oldItem, newItem, placeholder, event, element) => onResize(oldItem)}
                        style={canvasBoxStyle}
                        ref={gridRef}
                        {...gridLayoutProps}
            >
                {layout.map((layoutElement) =>
                    <div
                        style={{zIndex:getAttributesById(layoutElement.i).attributes.zIndex}}
                        key={parseInt(layoutElement.i)}
                        data-grid={layoutElement}
                        ref={(ref) => elementRefs.current.push(ref)}
                        onClick={() => {setConfigValues(layoutElement.i)}}
                    >
                        {createElement(layoutElement)}
                    </div>

                )}
            </GridLayout>

React 似乎忽略了“ref”属性，因为 none 的网格项 refs 被推入了 refs 数组

const elementRefs = useRef([]);

ref 属性适用于“GirdLayout”元素。

我不知道我做错了什么我尝试了很多东西。我需要每个网格项的引用来获取每个网格项的宽度和高度。

Answer 1

我认为为每个组件渲染推送 ref 不是一个好主意，因为在 re-renders 的情况下，这可能会创建一个包含重复元素的大数组。

您可以通过创建某种参考地图来解决这个问题。例如，以下代码对我来说工作正常：

import React, { useRef, useEffect } from "react";

const data = ["a", "b", "c", "d"];

export default function App() {
  const refs = useRef([]);

  useEffect(() => {
    console.log(refs);
  }, []);

  return (
    <div className="App">
      {data.map((d, i) => (
        <p key={i} ref={(ref) => (refs.current[i] = ref)}>
          {d}
        </p>
      ))}
    </div>
  );
}

该答案基于 Jorge Pirela 的其他答案：

可能不是最好的方法。

如何给 React Grid 布局的 Grid Items 一个参考

How to give Grid Items of a React Grid layout a reference

javascript

reactjs

ref

react-grid-layout