时间戳

首页 > 解决方案 > React JS 在带有 reactstrap 的页面中多次使用引导轮播

html - 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

标签： htmlnode.jsreactjsbootstrap-4reactstrap

解决方案

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

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

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

推荐阅读