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

    <TableCell variant="head">{column.headerName}</TableCell>

    

    <TableCell variant="body">

            {rows[Object.keys(rows)[index]]}

    </TableCell>

</TableRow>