代码之家 › 专栏 › 技术社区 › Joseph

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

react-hooks material-ui ecmascript-6 reactjs javascript

Joseph · 技术社区 · 5 年前

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

请检查我的代码沙盒

Click Here

预期产量

代码

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

2 回复 | 直到 5 年前

Gerardo Sabetta 5 年前

下面是我如何在不改变你的初始代码的情况下做到这一点的

https://codesandbox.io/s/material-demo-forked-nk293

演示.js

  const columns = [
    { headerName: "ID", field: "id" },
    { headerName: "Request", field: "request" }
  ];

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

material-table's API

Budi Salah 5 年前

这是我的答案没有

<TableRow>
    <TableCell variant="head">{column.headerName}</TableCell>
    
    <TableCell variant="body">
            {rows[Object.keys(rows)[index]]}
    </TableCell>
</TableRow>

推荐文章