javascript - 无论如何,是否可以将数组返回到不同的网格列

标签 javascript reactjs

我有一个这样的功能,我想将单元格放在网格列的左侧和右侧,现在它只是一个一个地放置,对于左侧网格列,它应该是 <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/

相关文章:

javascript - 使用 window.setInterval 对现有对象执行方法

javascript从数组元素中删除重复的单词

reactjs - 你如何使用 css 模块在 React 中使用伪类?

javascript - 在 highcharts-react-official 上定义和应用主题

javascript - $_POST 不从 Javascript 的 Fetch() 中检索数据

javascript - Canvas 的 drawImage 方法真的是同步的吗?

javascript - 触发在焦点事件上调用的异步等待函数的回调

android - 'gradlew' 不是内部或外部命令、可运行程序或批处理文件

javascript - ReactJS - 销毁旧的组件实例并创建新的

javascript - 如何支持由 docusaurus 维护的旧版本文档的更改