reactjs - 如何在 React material-ui 中使用 Grid 到另一个文件中
问题描述
我使用 React js。我想使用 Grid,但在这种特殊情况下我不能。我有一个名为 CardComponent.js 的组件问题是我使用了地图功能。我不知道如何使用网格。
import React from "react";
const rows = [
{
id: 7,
email: "michael.lawson@reqres.in",
first_name: "Michael",
last_name: "Lawson"
},
{
id: 8,
email: "lindsay.ferguson@reqres.in",
first_name: "Lindsay",
last_name: "Ferguson"
},
{
id: 9,
email: "michael.lawson@reqres.in",
first_name: "Michael",
last_name: "Lawson"
},
{
id: 10,
email: "lindsay.ferguson@reqres.in",
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;
如何使用 Grid 每行显示 2 张卡片?目前,每行显示 1 张卡片。在这里你可以看到我的codesandbox.io 提前谢谢你的帮助和指导
解决方案
推荐阅读
- javascript - JavaScript 数组解题题
- javascript - 为什么 twig json_encode 在某些情况下不起作用?
- kubernetes - 从 Kubernetes 部署中公开 SCDF 服务
- sap - SAP RFC:parameter_type RFTYPE_TABLE:uc_length 的含义?
- c - 我在 C 中打开文件时遇到问题
- python - Jack 服务器未在 ubuntu 16.04 中运行
- scala - Scala play Json - 使用类型参数读取转换器
- python - 如何更改我将拥有的内容更改为 python 地图函数?
- javascript - 如何在 Javascript 中对 Array map() 函数输出进行排序
- swift - 如何将二维数组传递给视图控制器?