时间戳

首页 > 解决方案 > React-Material UI Grid Column 问题

reactjs - React-Material UI Grid Column 问题

问题描述

我正在使用反应应用程序。对于样式，我使用的是 Material-UI 库。

我从一个开放的 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;

标签： reactjsgridmaterial-ui

解决方案

据我了解，您提供的代码是 HeroCard，您希望所有 HeroCard 以 3 列的网格格式显示。<Grid container>应该包装所有 heroCard，而不是每个 heroCard 。为了实现这一点，我遵循了这个 mui 示例的源代码。

这将是接收数据并将其传递给 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;

一些注意事项和个人建议：

  • 使用prop-types以便您和其他阅读您的代码的人知道每个组件接收到的 props 的类型。这只是众多好处之一。
  • Mui 转换height: 200为height: "200px"; 更多信息。

祝你好运！:)

推荐阅读