我有一个这样的功能,我想将单元格放在网格列的左侧和右侧,现在它只是一个一个地放置,对于左侧网格列,它应该是 <GridColumn gridUnits={6}>
,对于正确的,可以是 <GridColumn gridUnits={6} position='last'>
,有没有根据索引区别对待,如果是奇数则属于左Grid Column,如果是偶数则属于右Grid Column?
如何实现这一目标?
generateEquipmentListByCell(printerCellMap, dryerCellMap) {
const equipmentKey = {...printerCellMap, ...dryerCellMap};
if (!_.isEmpty(equipmentKey)) {
return (
Object.keys(equipmentKey).map((key, index) =>
<GridColumn gridUnits={6}>
<EquipmentCell printerList={printerCellMap[key]}
dryerList={dryerCellMap[key]}
index={index}/>
</GridColumn>
)
);
}
最佳答案
可能会做这样的事情:
generateEquipmentListByCell(printerCellMap, dryerCellMap) {
const equipmentKey = {...printerCellMap, ...dryerCellMap};
if (!_.isEmpty(equipmentKey)) {
return (
<div>
<GridColumn gridUnits={6}>
{
Object.keys(equipmentKey).map((key, index) => (
(index % 2) ?
<EquipmentCell printerList={printerCellMap[key]}
dryerList={dryerCellMap[key]}
index={index}/> : null
));
}
</GridColumn>
<GridColumn gridUnits={6} position="last">
{
Object.keys(equipmentKey).map((key, index) => (
(index % 2 !== 0) ?
<EquipmentCell printerList={printerCellMap[key]}
dryerList={dryerCellMap[key]}
index={index}/> : null
));
}
</GridColumn>
</div>
);
}
}
需要您执行两个循环,但它应该可以实现您的目标。如果您不确定 %
运算符的作用。文档可以找到 here .
关于javascript - 无论如何,是否可以将数组返回到不同的网格列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51254636/