如何在React material-ui中在地图内使用网格 [英] how to use Grid Inside the Map in React material-ui

问题描述

我使用React js.我想使用Grid，但在这种情况下我不能使用.我有一个名为CardComponent.js的组件.问题是我使用了map函数.我不知道如何使用网格.

I use React js.I want to use Grid, but I can't in this particular case. I have a component called CardComponent.js The problem is that I use the map function. I don't know how to use Grid.

import React from "react";

const rows = [
  {
    id: 7,
    email: "[e-mail]",
    first_name: "Michael",
    last_name: "Lawson"
  },
  {
    id: 8,
    email: "[e-mail]",
    first_name: "Lindsay",
    last_name: "Ferguson"
  },
  {
    id: 9,
    email: "[e-mail]",
    first_name: "Michael",
    last_name: "Lawson"
  },
  {
    id: 10,
    email: "[e-mail]",
    first_name: "Lindsay",
    last_name: "Ferguson"
  }
];

const ElevatedCardHeader = () =>
  rows.map(row => (
    <Card className={"MuiElevatedCard--01"}>
      <CardHeader
        className={"MuiCardHeader-root"}
        title={row.id}
        subheader={row.email}
        classes={{
          title: "MuiCardHeader-title",
          subheader: "MuiCardHeader-subheader"
        }}
      />
      <CardContent className={"MuiCardContent-root"}>
        <Grid container spacing={2}>
          <Grid item xs={12} sm={6}>
            <Grid container>
              <Grid container justify="space-evenly">
                <label>first_name:</label>
                <label>{row.first_name}</label>
              </Grid>
            </Grid>
            <Divider light />
          </Grid>

          <Grid item xs={12} sm={6}>
            <Grid container>
              <Grid container justify="space-evenly">
                <label>last_name:</label>
                <label>{row.last_name}</label>
              </Grid>
            </Grid>
            <Divider light />
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  ));
export default ElevatedCardHeader;

如何使用网格每行显示2张卡?当前，每行显示1张卡.在这里您可以看到我的 Codesandbox 预先感谢您的帮助和指导

How can I display 2 cards per row using Grid?Currently, 1 card is displayed in each row. Here you can see my Codesandbox Thank you in advance for your help and guidance

推荐答案

您缺少父级的grid container:

<Grid container>
  {rows.map(row => (
    ...
  ))}
</Grid>

工作演示:

这篇关于如何在React material-ui中在地图内使用网格的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！