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

我无法找到有关如何解决以下问题的信息： 我有一行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.map（（数据，索引）=>{
返回(
//结束标记

这里有两个选项：

将网格大小添加到

组件数据

，以便您可以在

地图

-函数中访问它：

定义一个按顺序指定网格大小的数组，然后您也可以通过

索引在
地图中访问该数组：

const gridsize=[2,3,2,2,3]；
...

这里有两个选项：

将网格大小添加到

组件数据

，以便您可以在

地图

-函数中访问它：

定义一个按顺序指定网格大小的数组，然后您也可以通过

索引在
地图中访问该数组：

const gridsize=[2,3,2,2,3]；
...

如果

componentData

数组包含5个以上的项怎么办？如果它只能包含5个项，那么您可以只编写

componentData[0]

，

componentData[1]

…依此类推。或者您可以使用数组。如果

componentData

数组包含的项目超过5个，该怎么办？如果它只能包含5个项目，那么您可以只编写

componentData[0]

，

componentData[1]

…依此类推。或者您可以使用数组。

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