react-material-ui-carousel使用问题：无法在轮播中一行展示3张卡片

问题根因 #

你使用的react-material-ui-carousel组件默认将所有直接子元素识别为独立的轮播项，你当前的代码直接把单个卡片组件作为Carousel的直接子元素遍历渲染，自然每个轮播页只会展示1张卡片。
同时你的代码还存在3处可优化的问题：

• DayCard组件导入语句中重复导入了Container组件
• DayCardItem组件的Grid标签重复声明了item属性
• DayCardItem组件漏写了外层的Card包裹标签，CardContent需要作为Card的子组件使用

修复方案 #

你需要先把数据源按每3项为一组拆分，每一组对应一个轮播页，组内通过Grid容器布局实现3张卡片同行展示，修改后的代码如下：

1. DayCard组件代码 #

import React from "react";
import {
  Container,
  Grid,
  makeStyles
} from "@material-ui/core";
import Carousel from "react-material-ui-carousel";
import DayCardItem from "./DayCardItem";

// 数组分组工具函数
const chunkArray = (arr, size) => {
  const result = [];
  for (let i = 0; i < arr.length; i += size) {
    result.push(arr.slice(i, i + size));
  }
  return result;
};

// 补全你原代码中未定义的useStyles逻辑
const useStyles = makeStyles((theme) => ({
  // 可根据需求自定义样式
}));

const DayCard = (props) => {
  const { dailyData } = props;
  // 按每3个一组拆分数据
  const pageData = dailyData ? chunkArray(dailyData, 3) : [];
  const classes = useStyles();
  return (
    <Container>
      <Carousel
        autoPlay={false}
        animation={"fade"}
        navButtonsAlwaysVisible={true}
      >
        {pageData.map((group, groupIndex) => (
          // 每个分组对应一个轮播页，用Grid容器包裹内部卡片
          <Grid container spacing={2} key={groupIndex}>
            {group.map((day, index) => (
              <DayCardItem key={index} day={day} />
            ))}
          </Grid>
        ))}
      </Carousel>
    </Container>
  );
};

export default DayCard;

2. DayCardItem组件代码 #

import React from "react";
import {
  Card,
  Typography,
  CardContent,
  Grid,
} from "@material-ui/core";

const DayCardItem = (props) => {
  const { day } = props;
  return (
    <Grid item xs={12} sm={6} md={4}>
      <Card>
        <CardContent>
          <Typography>{day.dt}</Typography>
          <Typography gutterBottom variant="h5" component="h2">
           {day.main.temp}
          </Typography>
        </CardContent>
      </Card>
    </Grid>
  );
};

export default DayCardItem;

内容的提问来源于stack exchange，提问作者Moni