我从一个开放的API中获取数据，并将数据传递到子组件中，并将其呈现给子组件。我想在一排三列卡片中显示它们。我已经尝试过很多基于Material UI文档的方法，但是都没有成功。
import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import Grid from "@material-ui/core/Grid";
import moment from "moment";
const useStyles = makeStyles(theme => ({
gridRoot: {
flexGrow: 1
},
paper: {
width: "390px",
height: "200px",
textAlign: "center",
padding: "30px",
borderRadius: "25px"
},
subText: {
fontWeight: "fontWeightMedium",
paddingBottom: "3px",
fontSize: "18px",
fontFamily: "Roboto Condensed"
}
}));
function HeroCard({ districts, source, date }) { // This is props
const classes = useStyles();
return (
<React.Fragment>
<Grid container className={classes.gridRoot} spacing={2}>
<Grid item xs={12}>
<Grid container spacing={2}>
<Grid item xs spacing={2}>
<Paper className={classes.paper}> //This is my Hero card.
<Typography className={classes.subText}>
Health care district: {districts ? districts : "Unknown"}
</Typography>
<Typography className={classes.subText}>
Infection source of country: {source ? source : "Unknown"}
</Typography>
<Typography className={classes.subText}>
Date of infected: {moment(date).format("LLLL")}
</Typography>
</Paper>
</Grid>
</Grid>
</Grid>
</Grid>
</React.Fragment>
);
}
export default HeroCard;
<Grid container>应该包装所有的heroCard，而不是每个heroCard。为此，我遵循了this mui example中的源代码。这将是接收数据并将其传递给heroComponent的父组件：
import React from "react";
import HeroCard from "./path/to/HeroCard";
import Grid from "@material-ui/core/Grid";
import Box from "@material-ui/core/Box";
const data = [
{ id: 0, districts: "Lima", source: "COVID-19", date: "03-18-2020" },
{ id: 1, districts: "Miraflores", date: "03-18-2020" },
{ id: 2, districts: "San Isidro", date: "03-18-2020" },
{ id: 3, districts: "Surquillo", date: "03-18-2020" }
];
function App() {
return (
<Box p={(2, 4)}>
<Grid container justify="center" spacing={2}>
{data.map((card) => (
<Grid key={card.id} item xs={4}>
<HeroCard
districts={card.districts}
source={card.source}
date={card.date}
/>
</Grid>
))}
</Grid>
</Box>
);
}
export default App;
和HeroCard组件看起来像这样：
import React from "react"; import { makeStyles } from "@material-ui/core/styles"; import Paper from "@material-ui/core/Paper"; import Typography from "@material-ui/core/Typography"; import moment from "moment"; const useStyles = makeStyles((theme) => ({ paper: { // width: 390, // disabled width so the cards become responsive height: 200, textAlign: "center", padding: theme.spacing(3), // 30, // it's recommended to use theme.spacing for margins and paddings borderRadius: 25 }, subText: { fontWeight: "fontWeightMedium", paddingBottom: 3, fontSize: 18, fontFamily: "Roboto Condensed" } })); function HeroCard({ districts, source, date }) { const classes = useStyles(); return ( <Paper className={classes.paper}> <Typography className={classes.subText}> Health care district: {districts ? districts : "Unknown"} </Typography> <Typography className={classes.subText}> Infection source of country: {source ? source : "Unknown"} </Typography> <Typography className={classes.subText}> Date of infected: {moment(date).format("LLLL")} </Typography> </Paper> ); } export default HeroCard;
一些注意事项和个人建议：
height: 200转换为height: "200px"； more info。