我正在使用 react-grid-layout制作 drag-drop and resize components
,所以我能够实现文档中提到的功能。
我的问题
{ {i: 'a', x: 0, y: 0, w: 1, h: 2}
这样的布局在具有预定义布局的静态 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 中没有显示(根据我的使用),This is what I found out in library for dynamic 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',
},
],
},
],
});
通过上述数据,我正在根据需要创建 Uireturn 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。
Here is my code sand box what I am trying to do dynamically
编辑/更新
我从
@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 中都雇用了我,得到,而在另一个我得到了两个应该是
Info
有两个雇员,因此在一个网格中一个雇用,另一个在另一个网格中雇用。问题出在
generateDOM
这个功能作为布局是完美生成的,但在一个布局中,它对其他布局重复所有相同,如果长度为 3,那么它正在创建 3 个布局,这完全没问题,但在一个布局内,它是 agian 循环并显示重复数据 在这里,我附上了一张图片,它应该如何在 UI 上显示
最佳答案
我认为问题在于没有使用布局,我还注意到从 lodash 中随机使用不正确(但这不是必需的)
我用 data1.EmpData[l.i]
在我映射 layout
时获取要显示的数据.
我还创建了 sandbox哪里有一个动态添加的按钮,我想这就是你想要的。
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>
</>
);
sanbox2
关于javascript - 如何使用 react-grid-layout 创建动态拖放布局,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/66438916/