如何使用 react-grid-layout 创建动态拖放布局

Question

我正在使用react-grid-layout来制作drag-drop and resize components，所以我能够实现文档中提到的功能。

我的问题

• 我正在创建动态 UI，所以我正在用数据渲染我的 UI。
• 在这个库中，我需要创建布局，例如 { {i: 'a', x: 0, y: 0, w: 1, h: 2}
• 当我创建静态 UI 时，我能够实现我想要的。这是工作代码沙箱

在具有预定义布局的静态 Ui 中，我喜欢下面的内容。

    const layout = [
    { i: "a", x: 0, y: 0, w: 2, h: 1 },
    { i: "b", x: 2, y: 0, w: 2, h: 1 },
    { i: "c", x: 4, y: 0, w: 2, h: 1 },
    { i: "d", x: 6, y: 0, w: 2, h: 1 },
    { i: "e", x: 0, y: 2, w: 2, h: 1 }
  ];

<div className="App">
  <GridLayout
    className="layout"
    layout={layout}
    style={{ backgroundColor: "blue" }}
  >
    {layout.map((li) => (
      <div key={li.i} style={{ backgroundColor: "yellow" }}>
        {li.i}
      </div>
    ))}
  </GridLayout>

这工作正常，但这里我定义的布局是静态的，因此为此我搜索并获得了一个动态高度和宽度的示例，它正在创建动态布局。

但这只是用随机数创建布局，这些数字没有显示在我的 UI 中（根据我的使用），这是我在动态 UI 库中发现的

我想做什么

我在我的州有这些数据

const [data1, setData] = useState({
    EmpData: [
        {
            empId: 11,
            lay1: { i: 'a' },
            data: [
                {
                    firstName: 'Steve',
                    lastName: 'Smith',
                },
                {
                    firstName: 'Michel',
                    lastName: 'Muner',
                },
            ],
        },
        {
            empId: 12,
            lay1: { i: 'b' },
            data: [
                {
                    firstName: 'Charles',
                    lastName: 'Johnsen',
                },
                {
                    firstName: 'Glen',
                    lastName: 'Tyson',
                },
            ],
        },
        {
            empId: 13,
            lay1: { i: 'c' },
            data: [
                {
                    firstName: 'Steve',
                    lastName: 'Smith',
                },
                {
                    firstName: 'Michel',
                    lastName: 'Muner',
                },
            ],
        },
        {
            empId: 14,
            lay1: { i: 'd' },
            data: [
                {
                    firstName: 'Steve',
                    lastName: 'Smith',
                },
                {
                    firstName: 'Michel',
                    lastName: 'Muner',
                },
            ],
        },
        {
            empId: 15,
            lay1: { i: 'e' },
            data: [
                {
                    firstName: 'Steve',
                    lastName: 'Smith',
                },
                {
                    firstName: 'Michel',
                    lastName: 'Muner',
                },
            ],
        },
    ],
});

通过以上数据，我根据需要创建了 Ui

return data1.EmpData.map((li, index) => (
        <div key={index.toString()} data-grid={index}"> </div> //what should I pass here as key and layout that I am not getting
            <>
                {li.data.map((l) => (
                    <>
                        <div>{l.firstName}</div>
                        <div>{l.lastName}</div>
                    </>
                ))}
            </>
        </div>
    ));
};

传递key和创造动态layout是我无法弄清楚如何实现这一目标的地方，因为这对我来说是全新的事情。

我的 UI 是完全动态的每次我要获取动态数据时，我都需要显示很多卡片或 div。

这是我的代码沙箱，我正在尝试动态执行此操作

编辑/更新

我得到的答案@Daniil Loban非常有帮助，但是当我尝试使用实时数据进行循环时，它会循环两次，这是因为我的数据与我在此处显示的数据略有不同

其实我无法理解I use data1.EmpData[l.i] to get data to display when I map layout.这一行。

我的资料

    [
{
  compId: 5,
  company_name: "Info",
  comp_data: [
    {
      empId: 1,
      empName:"steve"
    },
    {
      empId: 2,
      empName:"meg"
    }
  ]
},
{
  compId: 6,
  company_name: "wipro",
  comp_data: [
    {
      empId: 11,
      empName:"mark"
    },
    {
      empId: 12,
      empName:"Tnml"
    }
  ]
}

]

• 数据的流向就像公司->该公司的雇员->该公司的数据，
• 所以这里的公司可以是多个员工，数据也可以是多个类似的
• 我在以前的数据中更新的内容我没有提到公司，因为我想到了编写最少的代码。
• 我现在添加了完整的代码，这是我的代码沙箱

问题

• 问题是它正在重复数据，我正在显示重复的数据

• 我会在这里解释， company namme->companydata->employe name这应该是完美的，但正在发生的事情是——公司名称->在一个 div 中都使用了我 a，在另一个中我得到了两个

应该是因为Info有两个雇用，所以在一个网格中一个雇用，另一个雇用另一个。

问题在generateDOM于此功能，因为布局是完美生成的，但在一个布局中，它对其他布局重复所有相同的内容，如果长度为 3，则它正在创建 3 个完全没问题的布局，但在一个布局中，它再次循环并显示重复数据

在这里，我附上了一张图片，它应该如何在 UI 上显示

Answer 1

我认为问题是没有使用布局，我还注意到错误地使用了 lodash 中的随机数（但这不是必需的）

我用来data1.EmpData[l.i]在绘制地图时获取要显示的数据layout。

我还创建了一个沙箱，其中有一个用于动态添加的按钮，我认为这就是您想要的。

  const generateDOM = () => {
    // Generate items with properties from the layout, rather than pass the layout directly
    const layout = generateLayout();
    return _.map(layout, function (l) {
      return (
        <div key={l.i} data-grid={l} className="bg-success">
          <>
            <div className="rounded" key="?"></div>
            {data1.EmpData[l.i].data.map((l) => (
              <>
                <div>{l.firstName}</div>
                <div>{l.lastName}</div>
              </>
            ))}
          </>
        </div>
      );
    });
  };

对于更新的问题：

  const generateDOM = (lo) => {
    // Generate items with properties from the layout, rather than pass the layout directly
    const layout = generateLayout();
    return _.map(layout, function (l) {
      return (
        <div key={l.i} data-grid={l} className="bg-success">
          <div>{lo[l.i].empName}</div>
          {console.log(lo, l, active_menu)}
        </div>
      );
    });
  };

当我们渲染时，we don't need map只需一个调用：

  return (
    <>
      {data1.map((d, ind) => (
        <div className={ind === active_menu ? "compNameActive" : "compName"}>
          <p onClick={() => compClick(ind)}>{d.company_name}</p>
        </div>
      ))}
      <ReactGridLayout onLayoutChange={onLayoutChange} {...props}>
        {generateDOM(data1[active_menu].comp_data)}
      </ReactGridLayout>
    </>
  );

沙盒2