React JS 在带有 reactstrap 的页面中多次使用 bootstrap 轮播

Question

我很难在一个页面中多次使用 bootstrap 轮播。

我尝试了很多副本作为新项目，但它总是显示错误。

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

Answer 1

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

一张CarouselItem是一张图片。整个轮播本身就是 Carousel 组件。

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

React JS 在带有 reactstrap 的页面中多次使用 bootstrap 轮播

React JS use bootstrap carousel multiple times in a page with reactstrap

html

node.js

reactjs

bootstrap-4

reactstrap