javascript 如何将2D阵列Map到ReactJS和MUI组件中卡组件矩阵

brc7rcf0 于 2023-01-24 发布在 Java

关注(0)|答案(1)|浏览(92)

我得到了一个2d对象数组，我需要从它创建一个every card will have some text which is taken from the object卡矩阵，我使用了. map函数，但结果为以下数组
[[对象1，对象2，对象3]，[对象4，对象5，对象6]，[对象7，对象8，对象9]] is
这是我的密码

export defult function Content() {
     return(
       <Grid>
       {DUMMY_DATA.map((obj) => {
         return (
          <Grid item sm={4} sx={{m:1}}>
           <assetCard
           key={obj.id}
           id={obj.id}
           name={obj.text}
          />
         </Grid>
      )
    })}
  </Grid>
 );
}

JavaScript

来源：https://stackoverflow.com/questions/75202095/how-do-i-map-a-2d-array-in-to-a-matrix-of-card-componants-in-react-js-and-mui-co

1条答案

按热度按时间

chhkpiq41#

在MUI中，列宽是1到12之间的整数值。
只要12是X轴中条目数的倍数（在您提供的示例中就是这样），您就可以用12除以该数字，然后使用“Array.prototype.flatMap”将生成的组件列表扁平化：

export default function Content() {
     return(
       <Grid>
       {DUMMY_DATA.flatMap(xs => xs.map(x => (
          <Grid item xs={12 / xs.length}>
           <AssetCard
             key={x.id}
             id={x.id}
             name={x.text}
           />
         </Grid>
      )
    )))}
  </Grid>
 );
}

赞(0）回复(0）举报 2023-01-24

我来回答

javascript 如何将2D阵列Map到ReactJS和MUI组件中卡组件矩阵

1条答案

相关问题

热门标签

最新问答