Javascript 在React中迭代网格和卡中的值

我想实现尽可能少的代码，所以我在我的应用程序中实现了一个可重用的组件。 我的问题是如何迭代

网格

、

卡片

和

表格

中的列和行。解决这个问题的最佳方案是什么

请检查我的代码沙盒

预期产出

代码

  <Grid container spacing={2}>
    {rows.map((row, index) => (
      <Grid item md={4} sm={6} xs={12} key={index}>
        <CardComponent columns={columns} rows={row} />
      </Grid>
    ))}
  </Grid>

{rows.map（（行，索引）=>(
))}

以下是我在不太修改初始代码的情况下如何做到这一点

demo.js

const列=[
{标题名：“ID”，字段：“ID”}，
{标题名称：“请求”，字段：“请求”}
];

card.js

                <TableCell variant="body">{row[column.field]}</TableCell>

{row[column.field]}

---

它“类似于”

以下是我的答案，不改变列和行结构：

{column.headerName}
{rows[Object.keys（rows）[index]]}

谢谢您的帮助。如果我想添加一个

，并且我还添加了一个名为'dontDisplay'的变量，我不想显示该变量，该怎么办。请检查这个代码沙盒。您可以将我的代码结构更改为更好的结构。谢谢，所以这个

dontDisplay

不是一个布尔值，它是一个字符串，它应该隐藏什么？很抱歉混淆了。请忽略

不显示

。我如何在那里添加带有

id的
？它在迭代之外，对吗？您可以通过访问该id的方式重新构造我的代码，因为它位于行中，希望有帮助：）