我怎样才能把它变成一个工作旋转木马？旋转木马弹出但两个箭头不活动

问题描述

我怎样才能把它变成一个工作轮播，在同一个轮播旋转中显示 3 张或更多张牌？ 这是我放在一起的示例代码，但无法在不同的旋转中显示更多的卡片。 我的目标是能够在旋转木马的每个弹簧（总共四次旋转）上显示多张卡片。

import React,{ Component } from "react";
import {
  Card,CardHeader,CardBody,CardFooter,Box,Image,Grid,heading,Carousel,grommet
} from "grommet";
export class Events extends Component {
  render() {
    const customTheme = {
      carousel: { row: { count: 1 },column: { count: 3 } }
    };
    return (
      <Box fill="vertical">
        <Box align="center">
          <heading textAlign="center">Upcoming Events</heading>
          <grommet theme={customTheme}>
            <Carousel>
              <Grid
                columns={{ count: 3,size: "auto" }}
                rows={{ count: 1,size: "medium" }}
                gap="medium"
                pad="small"
              >
                <Box
                  pad="medium"
                  align="center"
                  background={{ color: "white",opacity: "strong" }}
                  round
                  gap="small"
                  fill="vertical"
                >
                  <Card pad="large" background="dark-1" gap="medium">
                    <CardHeader>
                      <Box height="small" width="small">
                        <Image src="./images/Photo.jpg" />
                      </Box>{" "}
                    </CardHeader>
                    <CardBody pad="small">
                      The Stranahan High School Graduation
                    </CardBody>{" "}
                    <CardFooter>Footer</CardFooter>{" "}
                  </Card>{" "}
                </Box>
                <Box
                  pad="medium"
                  align="center"
                  background={{ color: "white",opacity: "strong" }}
                  round
                  gap="small"
                  fill="vertical"
                >
                  <Card pad="large" background="dark-1" gap="medium">
                    <CardHeader>
                      {" "}
                      <Box height="small" width="small">
                        {" "}
                        <Image src="./images/Photo.jpg" />{" "}
                      </Box>{" "}
                    </CardHeader>{" "}
                    <CardBody pad="small">
                      The Stranahan High School Graduation
                    </CardBody>
                    <CardFooter>Footer</CardFooter>{" "}
                  </Card>{" "}
                </Box>
                <Box
                  pad="medium"
                  align="center"
                  background={{ color: "white",opacity: "strong" }}
                  round
                  gap="small"
                  fill="vertical"
                >
                  <Card pad="large" background="dark-1" gap="medium">
                    <CardHeader>
                      {" "}
                      <Box height="small" width="small">
                        <Image src="./images/Photo.jpg" />{" "}
                      </Box>
                    </CardHeader>
                    <CardBody pad="small">
                      The Stranahan High School Graduation
                    </CardBody>
                    <CardFooter>Footer</CardFooter>{" "}
                  </Card>{" "}
                </Box>
                <Box
                  class="Cards"
                  flex={false}
                  direction="row"
                  justify="between"
                  pad={{ left: "small",right: "small",top: "xsmall" }}
                >
                  {" "}
                </Box>{" "}
              </Grid>{" "}
            </Carousel>{" "}
          </grommet>{" "}
        </Box>{" "}
      </Box>
    );
  }
}
export default Events;

解决方法

我已经为您修复了示例，每个 Carousel 开关显示的卡片数量取决于您将放置在 Carousel 子节点上的内容。我清理了一些冗余并将卡片分成可重复使用的组件，这些组件将用作子组件。此外，请注意使用 Carousel's docs 中提到的主题，我认为我们不需要此练习的主题，因此我已将其删除。

import React from "react";

import {
  Card,CardHeader,CardBody,CardFooter,Box,Image,Heading,Carousel,Grommet
} from "grommet";

const Card0 = () => (
  <Card pad="large" background="dark-1" gap="medium">
    <CardHeader>
      <Box height="small" width="small">
        <Image src="./images/Photo.jpg" />
      </Box>
    </CardHeader>
    <CardBody>Card0 The Stranahan High School Graduation</CardBody>
    <CardFooter>Footer</CardFooter>
  </Card>
);

const Card1 = () => (
  <Card pad="large" background="dark-1" gap="medium">
    <CardHeader>
      <Box height="small" width="small">
        <Image src="./images/Photo.jpg" />
      </Box>
    </CardHeader>
    <CardBody>Card1 The Stranahan High School Graduation</CardBody>
    <CardFooter>Footer</CardFooter>
  </Card>
);

const Card2 = () => (
  <Card pad="large" background="dark-1" gap="medium">
    <CardHeader>
      <Box height="small" width="small">
        <Image src="./images/Photo.jpg" />{" "}
      </Box>
    </CardHeader>
    <CardBody>Card2 The Stranahan High School Graduation</CardBody>
    <CardFooter>Footer</CardFooter>
  </Card>
);

const Events = () => (
  <Grommet>
    <Heading textAlign="center">Upcoming Events</Heading>
    <Carousel>
      <Box direction="row" pad="large" round gap="small">
        <Card0 />
        <Card1 />
        <Card2 />
      </Box>
      <Box direction="row" pad="large" background="brand" round gap="small">
        <Card2 />
        <Card1 />
        <Card0 />
        <Card2 />
      </Box>
      <Box direction="row" pad="large" background="accent-1" round gap="small">
        <Card2 />
        <Card1 />
        <Card0 />
      </Box>
      <Box direction="row" pad="large" background="accent-2" round gap="small">
        <Card2 />
        <Card1 />
        <Card0 />
        <Card2 />
      </Box>
    </Carousel>
  </Grommet>
);

export default Events;