react-grid-layout으로 동적 드래그 앤 드롭 레이아웃을 만드는 방법

나는 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이것이 완벽해야한다고 여기에서 설명 할 것이다. 그러나 무슨 일이 일어나고 있는지는-companyname-> 한 div에서 둘 다 I a를 고용하고, 또 다른 div에서 나는 둘 다 얻는다

Info하나의 그리드에서 하나는 고용하고 다른 하나는 다른 하나에서 고용하므로 두 가지 고용 이 있어야합니다 .

문제는 generateDOM레이아웃이 완벽하게 생성 되었기 때문에이 기능에 있습니다. 그러나 한 레이아웃에서는 다른 레이아웃에 대해서도 동일하게 반복됩니다. 길이가 3이면 완전히 괜찮은 3 개의 레이아웃을 생성하는 것입니다.하지만 한 레이아웃 안에는 반복해서 중복이 표시됩니다. 데이터

여기에 하나의 이미지를 첨부하여 UI에 어떻게 표시되어야하는지