javascript - 如何使用 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 中都雇用了我,得到,而在另一个我得到了两个
应该是因为Info
有两个雇员,所以在一个网格中一个雇员,在另一个网格中另一个雇员。
问题出在generateDOM
这个函数中,因为布局是完美生成的,但在一个布局中,它对其他布局重复所有相同,如果长度为 3,那么它正在创建 3 个布局,这完全没问题,但在一个布局中,它是 agian 循环并显示重复数据
解决方案
我认为问题在于没有使用布局,我还注意到从 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>
</>
);
推荐阅读
- azure-devops - Azure Pipeline 在运行被取消或成功时执行清理工作
- c# - 循环将数据导出到制表符分隔的文件添加额外的列
- asynchronous - 在 Rust 中为异步移动闭包克隆一个字符串
- r - Dplyr 管道 - 如果是这样,继续,否则结束
- python - 如何在 Python 中设置双重嵌套列表的元素?
- python - 程序在 while 循环期间忽略 if 语句
- python - 为什么我的烧瓶应用程序没有连接到云 Firestore?我写了这段代码
- reactjs - Typescript React无法在对象内找到属性
- javascript - 如何检测 iFrame 的卸载事件
- c# - 根据另一个组合框2填充组合框1