使用不同网格大小进行迭代的方法答案

【问题标题】：Way to iterate with different grid sizes使用不同网格大小进行迭代的方法
【发布时间】：2020-05-20 07:10:02
【问题描述】：

我找不到有关如何解决以下问题的信息：我连续 5 个网格大小为 md={2}, md={3}, md={2}, md={2}, md={3} 现在我必须如下循环它，但是由于网格大小不同，如何管理它们？

 <Grid item xs={12}>
            <Grid container>
              {componentData.map((data, index) => {
                return (
                  <Grid item md={} key={index}>
 // closing tags

【问题讨论】：

如果componentData 数组有超过 5 个项目怎么办？如果它只能有 5 个项目，那么你可以写 componentData[0], componentData[1] .... 等等。或者你可以使用数组destructuring。

标签： javascript reactjs material-ui next.js

【解决方案1】：

你有两个选择：

将网格大小添加到componentData，以便您可以在map-函数中访问它：<Grid item md={data.gridSize} key={index}>
定义一个按顺序指定网格大小的数组，然后您也可以通过index 在map 中访问该数组：

const gridSizes = [2,3,2,2,3];
...
<Grid item md={gridSizes[index]} key={index}>

【讨论】：