React JS使用reactstrap在页面中多次使用引导轮播

问题描述

我在页面中多次使用引导轮播感到很困难。

我已经尝试了很多将复制作为新项目，但是它始终显示错误。

https://reactstrap.github.io/components/carousel/

<CarouselItem
  onExiting={() => setAnimating(true)}
  onExited={() => setAnimating(false)}
  key={item.src}
>
  <img src={item.src} alt={item.altText} />
  <CarouselCaption captionText={item.caption} captionHeader={item.caption} />
</CarouselItem>

..

<CarouselItem
  onExiting={() => setAnimating(true)}
  onExited={() => setAnimating(false)}
  key={item2.src}
>
  <img src={item2.src} alt={item2.altText} />
  <CarouselCaption captionText={item2.caption} captionHeader={item2.caption} />
</CarouselItem>

是否需要再次复制整个内容？

沙盒：https://codesandbox.io/s/zealous-wilbur-yeonm?file=/src/App.js

解决方法

您只需复制Carousel组件以及变量和事件处理程序，如下所示：https://codesandbox.io/s/sweet-ellis-43cbz?file=/src/App.js

CarouselItem是图像。整个轮播本身就是Carousel组件。

如果您需要轮播独立运行，则应为每个轮播创建单独的变量和处理程序。