React使用react-elastic-carousel时卡片单独生成轮播堆叠问题如何解决？

你的代码问题出在轮播组件的嵌套层级错误：你将写在了每个卡片子组件SlideChild的内部，遍历products数组生成卡片时，每个卡片都会初始化一个独立的轮播实例，最终就会出现多张卡片对应多个轮播堆叠展示的异常。

你只需要调整组件层级，将移到父组件Slider1中全局唯一初始化，遍历生成的卡片作为轮播的子元素传入即可。另外注意React中给元素加类名要用className，不要用原生的class属性。

修改后的完整代码如下：

import { useState } from 'react';
import Carousel from 'react-elastic-carousel';

// 子组件只保留卡片自身的业务逻辑，不嵌套轮播
const SlideChild = ({ title, category, desc }) => {
    const [open, setOpen] = useState(false);
    const onOpenModal = () => setOpen(true);
    const onCloseModal = () => setOpen(false);
    return (
        <div className='wrapper'>
            <div className='cards'>
                <p className='name' onClick={onOpenModal}>
                    {title}
                </p>
                {/* Modal 内容 */}
                <a className='category'>{category}</a>
            </div>
        </div>
    );
};

const Slider1 = () => {
    // 轮播组件放在父组件中，仅初始化一次
    return (
        <Carousel
            enableSwipe={true}
            enableAutoPlay
            autoPlaySpeed={3000}
            className='slider'
        >
            {/* 遍历生成的所有卡片作为轮播的子项，建议加上唯一key避免React列表警告 */}
            {Data.map(product => (
                <SlideChild 
                    key={product.id}
                    desc={product.desc} 
                    title={product.title} 
                    category={product.category}
                />
            ))}
        </Carousel>
    );
};

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