javascript - 将组件映射到 react-spring-3d-carousel？

Question

有谁知道如何将函数映射到 react-spring-3d-carousel？这是我拥有的代码，但似乎没有任何效果。我的投资组合项目数据结构很好，ImageMedia 只呈现一张卡片，而不是将每张卡片映射到各自的位置。

看来我只能成功渲染一辆车，但不确定这里出了什么问题。也许如果有人可以查看映射功能，他们将能够看到我在哪里搞砸了。

import React, { useState, useEffect } from "react";
import styled from "styled-components";
import Carousel from "react-spring-3d-carousel";
import { config } from "react-spring";

function Rotate(props) {
  const table = props.cards.map((element, index) => {
    return { ...element, onClick: () => setGoToSlide(index) };
  });

  const [offsetRadius, setOffsetRadius] = useState(0);
  const [showArrows, setShowArrows] = useState(false);
  const [goToSlide, setGoToSlide] = useState(null);
  const [cards] = useState(table);

  useEffect(() => {
    setOffsetRadius(props.offset);
    setShowArrows(props.showArrows);
  }, [props.offset, props.showArrows]);

  return (
    <CarouselWrapper>
      <Carousel
        slides={cards}
        currentSlide={goToSlide}
        offsetRadius={offsetRadius}
        showNavigation={showArrows}
        animationConfig={config.gentle}
      />
    </CarouselWrapper>
  );
}

export default Rotate;

const CarouselWrapper = styled.div`
  width: (${(props) => props.width});
  height: (${(props) => props.height});
  margin: (${(props) => props.margin});
`;

import React from "react";
import styled from "styled-components";
import Rotate from "./props/Rotate";
import portfolioItems from "./data/portfolioItems";
import ImageMediaCard from "./ImageMediaCard";
import { v4 as uuidv4 } from "uuid";

function Portfolio() {
  let cards = [
    {
      key: uuidv4(),
      content: <ImageMediaCard alt="1" />,
    },
    {
      key: uuidv4(),
      content: <ImageMediaCard alt="2" />,
    },
    {
      key: uuidv4(),
      content: <ImageMediaCard alt="3" />,
    },
    {
      key: uuidv4(),
      content: <ImageMediaCard alt="4" />,
    },
  ];

  return (
    <PortfolioWrapper id="portfolio">
      <PortfolioHeading>Portfolio</PortfolioHeading>
      <Rotate
        cards={
          {key: uuidv(),
            content: {portfolioItems.map((portfolioItem) => (
          <ImageMediaCard
            key={portfolioItem.id}
            image={portfolioItem.image}
            alt={portfolioItem.alt}
            title={portfolioItem.title}
            description={portfolioItem.description}
            website={portfolioItem.website}
            source={portfolioItem.source}
          />
        ))}}}
        height="500px"
        width="80%"
        margin="10px"
        offset={2}
        showArrows={false}
      />

      
    </PortfolioWrapper>
  );
}

export default Portfolio;

const PortfolioWrapper = styled.div`
  max-width: 100vw;
  padding-bottom: 120px;
  background-color: lightgreen;
  height: 900px;
  @media (max-width: 768px) {
    display: block;
    display: inline-block;
  }
`;

const PortfolioHeading = styled.h2`
  font-size: 60px;
  display: flex;
  justify-content: center;
`;

const RowWrap = styled.div`
  padding-top: 20px;
`;
const Row = styled.div`
  display: flex;
  justify-content: space-around;
  padding-bottom: 30px;
  margin-left: 30px;
  margin-right: 30px;
  @media (max-width: 768px) {
    flex-direction: column;
  }
`;

const Cards = styled(Card)`
  /* display: flex; */
  /* justify-content: space-around; */
`;

任何帮助将不胜感激！

标签： javascripthtmlcssreactjs