代码之家 › 专栏 › 技术社区 › 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>

推荐文章

Shibaji Biswas · 如何在Template literal的双引号内的html div id中编写JavaScript变量?

11 月前

GulgDev · 为什么不将属性设置为无效值?

1 年前

Koffee · 动画继续使用update()重新启动,而不是在Phaser 3中正常播放

1 年前

Monnt · 如何查看数组是否包括具有特定值的嵌套数组?

1 年前

JsCoder · 用ECDSA对C语言中的数据进行加密#

1 年前

dsi · 排序功能可实现多列的自定义差异

1 年前

huz3y · 如何在JavaScript中基于另一个变量值构建变量?如何重新分配它的值并对该变量执行方法?复制

1 年前

Darigan · clearTimeout将一个函数中的计时器与另一个函数(React.js)一起超时

1 年前

Joseph · 仅在React和JS中生成深色

1 年前

Joseph · 在Javascript中检索一些文本

1 年前