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

Posted 2023-03-23

【中文标题】React JS 在带有 reactstrap 的页面中多次使用引导轮播

【英文标题】：React JS use bootstrap carousel multiple times in a page with reactstrap

【发布时间】：2020-12-11 01:41:49

【问题描述】：

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

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

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

【问题讨论】：

我在您的沙箱中没有看到任何错误，您的意思是控制台日志中的警告吗？

【参考方案1】：

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

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

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

【讨论】：

@vishnu 对于activeIndex、next、previous、activeIndex、activeIndex 和 goToIndex，您需要单独的处理程序/变量。我会更新沙盒。给我一秒钟。

@vishu 立即查看codesandbox.io/s/sweet-ellis-43cbz?file=/src/App.js

@vishnu 是的。您可以做的是将.map() 和items 从多维数组输出到您的JSX，但是对于所有意图和目的，这应该可以正常工作。如果您愿意，可以按照以下方法执行此操作，但 CodePen 中的代码按原样工作。 reactjs.org/docs/lists-and-keys.html

@vishnu 但是，您仍然需要创建单独的事件处理程序，因此这可能是最佳解决方案。

检查我的代码并让您知道它是否有效.. :)