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

Question

我希望实现尽可能少的代码，因此我在我的应用程序中实现了一个可重用的组件。我的问题是如何迭代Grid,Card和中的列和行Table。对此最好的解决方案是什么？

预期输出

代码

  <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>

Answer 1

这是我在不过多更改初始代码的情况下执行此操作的方法演示.js  const columns = [     { headerName: "ID", field: "id" },     { headerName: "Request", field: "request" }   ];卡.js                <TableCell variant="body">{row[column.field]}</TableCell>它与material-table的API “相似”

Answer 2

这是我在不更改列和行结构的情况下的答案：<TableRow>&nbsp; &nbsp; <TableCell variant="head">{column.headerName}</TableCell>&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; <TableCell variant="body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {rows[Object.keys(rows)[index]]}&nbsp; &nbsp; </TableCell></TableRow>