我使用React js。我想使用Grid,但在这种情况下我不能。我有一个名为CardComponent.js的组件。问题是我使用了map函数。我不知道如何使用网格。
import React from "react";
const rows = [
{
id: 7,
email: "[email protected]",
first_name: "Michael",
last_name: "Lawson"
},
{
id: 8,
email: "[email protected]",
first_name: "Lindsay",
last_name: "Ferguson"
},
{
id: 9,
email: "[email protected]",
first_name: "Michael",
last_name: "Lawson"
},
{
id: 10,
email: "[email protected]",
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预先感谢您的帮助和指导
const ElevatedCardHeader = () => {
return(
<Grid container spacing={2}>
{
rows.map(row => (
<Grid item xs={6}>
<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>
</Grid>
))
}
</Grid>
)
}