React JS在页面中使用reactstrap多次使用引导轮播 [英] React JS use bootstrap carousel multiple times in a page with 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://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>

Is it need to copy the entire things again?

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

解决方案

You just copy the Carousel component along with the variables and event handlers like so: https://codesandbox.io/s/sweet-ellis-43cbz?file=/src/App.js

A CarouselItem is an image. The entire carousel itself is the Carousel component.

If you need the carousels to work independently, you should create separate variables and handlers for each carousel.

这篇关于React JS在页面中使用reactstrap多次使用引导轮播的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！