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

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

react-hooks material-ui ecmascript-6 reactjs javascript

Joseph · 技术社区 · 4 年前

我想实现尽可能少的代码,所以我在我的应用程序中实现了一个可重用的组件。我的问题是如何迭代 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 回复 | 直到 4 年前

Gerardo Sabetta 4 年前

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

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 4 年前

这是我的答案没有

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

推荐文章

Udders · 使用另一个数组中的值按索引从数组中删除

2 年前

Matt · 获取数组长度并推入每个对象

2 年前

Rahmouni Rabii · 尝试访问数组中的对象时未定义

2 年前

Brian Patterson · Javascript自定义数组。原型方法日志“未定义”

2 年前

dapidmini · 未捕获的承诺嵌套异步函数承诺错误处理

2 年前

Arka Bhattacharjee · 如何在JavaScript中反转大写的字符串?[重复]

2 年前

Zeeps Wear · 如何按键对对象进行分组?

2 年前

Kevin Giraldo · 如何更改字符串或数字在JavaScript中转换类的方式?

2 年前

Rachel · 如何按ID从JSON对象数组中删除数组元素

2 年前

minsu123 · 如何解析react中的单个引用?

2 年前