React multi carousel 错误地渲染项目答案

【问题标题】：React multi carousel renders items wronglyReact multi carousel 错误地渲染项目
【发布时间】：2020-08-14 05:20:37
【问题描述】：

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

所以问题是“react-multi-carousel”在我的应用程序中不起作用。因此，如果我对其中的值进行硬编码，基本上它就可以工作，但是当我使用我的自定义组件时，它是 map 函数，它不能正确呈现它。它需要 3 个组件，因为它们合二为一。您可以在我下面发布的图片上进行验证。我试图在SliderCarousel 组件之外渲染Compilations 组件，它可以正常工作，但是当我将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: "Бестселлеры"
    }
];

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

【问题讨论】：

标签： reactjs react-hooks next.js server-side-rendering react-multi-carousel

【解决方案1】：

实际上，这个轮播为每个元素创建了一个<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())} />

【讨论】：