如何使卡片组件排成一排（React）

Question

我最近开始学习反应。我使用 Material UI 制作卡片组件以进行反应，但这次我将使用 axios 和 map() 制作它。

我期望的是，卡片应该在同一行，而不是垂直。

这是使用 axios 和 map() 时卡片的样子

这是使用 React、axios 和 map() 的前端代码

import { makeStyles, withStyles } from "@material-ui/styles";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import axios from "axios";

//Material UI
import { Grid } from "@material-ui/core";
import Box from "@mui/material/Box";
import Card from "@mui/material/Card";
import CardActions from "@mui/material/CardActions";
import CardContent from "@mui/material/CardContent";
import Button from "@mui/material/Button";
import Typography from "@mui/material/Typography";

const useStyles = makeStyles({
  gridContainer: {
    paddingLeft: "40px",
    paddingRight: "40px",
  },
  root: {
    minWidth: 200,
  },
  bullet: {
    display: "inline-block",
    margin: "0 2px",
    transform: "scale(0.8)",
  },
  title: {
    fontSize: 14,
  },
  pos: {
    marginBottom: 12,
  },
});

function Home() {
  const classes = useStyles();
  const [getData, setGetData] = useState([]);

  useEffect(() => {
    axios.get("http://127.0.0.1:8080/api/get.php").then((x) => {
      setGetData(x.data);
    });
  }, [getData]);

  return (
    <div>
      {getData.map((x) => {
        return (
          <Grid
            container
            spacing={4}
            className={classes.gridContainer}
            justify="center"
            style={{ marginTop: "80px" }}
          >
            <Grid item xs={12} sm={6} md={4}>
              <Card className={classes.root} variant="outlined">
                <CardContent>
                  <Typography
                    className={classes.title}
                    color="textSecondary"
                    gutterBottom
                  >
                    Word of the Day
                  </Typography>
                  <Typography className={classes.pos} color="textSecondary">
                    adjective
                  </Typography>
                  <Typography variant="body2" component="p">
                    well meaning and kindly.
                    <br />
                    {'"a benevolent smile"'}
                  </Typography>
                </CardContent>
                <CardActions>
                  <Button size="small">Learn More</Button>
                </CardActions>
              </Card>
            </Grid>
          </Grid>
        );
      })}
    </div>
  );
}
export default Home;

我在使用 map() 方法之前寻找的预期输出

我是否遗漏了某些配置？或造型？网格？容器？

Answer 1

将您的网格容器移到 map 函数之外。您必须将 3 张卡片包裹在 Grid Container

中

Answer 2

<Grid container> 应该在循环之外。我也会考虑使用 Material UI v5。不要忘记循环项目的 key 道具。

<Grid
  container
  spacing={4}
  className={classes.gridContainer}
  justifyItems="center"
  style={{ marginTop: "80px" }}
>
  {getData.map((x, index) => (          
     <Grid key={index} item xs={12} sm={6} md={4}>
       ...
     </Grid>
  )}
</Grid>

Answer 3

您遇到的问题是您将每个组件（使用 map()）包装在它自己的 Grid container 中。您需要将容器元素放在 map() 函数之外，这样它才能按预期工作。

return (
    <div>
       <Grid
          container
          spacing={4}
          className={classes.gridContainer}
          justify="center"
          style={{ marginTop: "80px" }}
        >
         {getData.map((x) => {
           return (
            <Grid item xs={12} sm={6} md={4}>
              <Card className={classes.root} variant="outlined">
                <CardContent>
                  <Typography
                    className={classes.title}
                    color="textSecondary"
                    gutterBottom
                  >
                    Word of the Day
                  </Typography>
                  <Typography className={classes.pos} color="textSecondary">
                    adjective
                  </Typography>
                  <Typography variant="body2" component="p">
                    well meaning and kindly.
                    <br />
                    {'"a benevolent smile"'}
                  </Typography>
                </CardContent>
                <CardActions>
                  <Button size="small">Learn More</Button>
                </CardActions>
              </Card>
            </Grid>
        );
      })}
     </Grid>
    </div>
  );

如何使卡片组件排成一排（React）

How to make card component align in one row (React)

javascript

frontend

ecmascript-6

reactjs

material-ui