我正在使用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 中都雇用了我,得到,而在另一个我得到了两个
应该是因为Info
有两个雇员,所以在一个网格中一个雇员,在另一个网格中另一个雇员。
问题出在generateDOM
这个函数中,因为布局是完美生成的,但在一个布局中,它对其他布局重复所有相同,如果长度为 3,那么它正在创建 3 个布局,这完全没问题,但在一个布局中,它是 agian 循环并显示重复数据