2

我开始使用 Next js，但我不知道这是它的问题还是 React 本身的问题。

所以问题是“react-multi-carousel”在我的应用程序中不起作用。因此，如果我对其中的值进行硬编码，基本上它可以工作，但是当我使用我的自定义组件时，其中是 map 函数，它不能正确呈现它。它需要 3 个组件，因为它们合二为一。您可以在我下面发布的图片上进行验证。我试图在Compilations组件之外渲染组件SliderCarousel，它应该可以正常工作，但是当我Compilations作为孩子传递给时SliderCarousel，它不会捕获它并从react-multi-carousel库中给它自己的类

这是我下面的代码，我省略了一些导入和导出以将注意力集中在主要部分

我的Compilation组件如下所示：

const compilation = ({ className, text, img }) => {
    return (
        <div className={`${className} ${classes.Compilation}`}>
            <img src={img} alt={text} />
            <div>
                <h3>{text}</h3>
            </div>
        </div>
    );
};

我的Compilations组件如下所示：

const compilations = ({ items, onClick }) => {
    const compilationsView = items.map(item => {
        return <Compilation key={item.id} onClick={() => onClick(item.id)} text={item.text} img={item.img} />;
    });
    return <React.Fragment>{compilationsView}</React.Fragment>;
};

SliderCarousel组件看起来像这样

<Carousel
                swipeable={true}
                draggable={true}
                showDots={true}
                responsive={responsive}
                ssr={true} // means to render carousel on server-side.
                infinite={true}
                autoPlay={true}
                autoPlaySpeed={1000}
                keyBoardControl={true}
                customTransition="all .5"
                transitionDuration={500}
                containerClass="carousel-container"
                removeArrowOnDeviceType={[ "tablet", "mobile" ]}
                // deviceType={this.props.deviceType}
                dotListClass="custom-dot-list-style"
                itemClass="carousel-item-padding-40-px"
            >
                {items}
            </Carousel>{" "}

这是我的pages/index.js文件

<SliderCarousel items={<Compilations items={getBookCarouselItems()} />} />

功能是：

    {
        id: 0,
        img: "/static/images/main/books/slider-carousel/1.png",
        text: "ТОП-10 романов"
    },
    {
        id: 1,
        img: "/static/images/main/books/slider-carousel/2.png",
        text: "На досуге"
    },
    {
        id: 2,
        img: "/static/images/main/books/slider-carousel/3.png",
        text: "Бестселлеры"
    }
];

在此处输入图像描述

我希望你能帮我解决这个问题，因为我不知道如何解决这个问题

4

1 回答 1

0

实际上，这个轮播<li>为每个元素制作了一个来操纵轮播效果，正如您在检查屏幕截图中看到的那样

在你的代码中

const compilations = ({ items, onClick }) => {
    const compilationsView = items.map(item => {
        return <Compilation key={item.id} onClick={() => onClick(item.id)} text={item.text} img={item.img} />;
    });
    return <React.Fragment>{compilationsView}</React.Fragment>;
};

您将地图列表包装在片段中，因此轮播只有一个项目作为组件，因此只有一个<li/>

所以为了工作，你必须通过地图列表（即数组）<Compilation />

const allCompilations = (items) => items.map(item => {
        return <Compilation key={item.id} onClick={() => onClick(item.id)} text={item.text} img={item.img} />;
    });

小时候给你旋转木马

<SliderCarousel items={allCompilations(getBookCarouselItems())} />
于 2021-12-28T15:33:04.453 回答