如何解决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
组件。
如果您需要轮播独立运行,则应为每个轮播创建单独的变量和处理程序。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。