Reactstrap Carousel组件添加Caption后出现跨幻灯片异常显示问题

你遇到的问题核心原因是未正确引入Bootstrap的CSS样式。Reactstrap的组件完全依赖Bootstrap的样式体系，CarouselCaption的定位规则、非激活幻灯片标题的隐藏逻辑都需要Bootstrap样式来支撑，缺失样式会直接导致标题位置错乱、所有幻灯片标题同时显示的异常情况。

解决步骤： #

1. 引入匹配版本的Bootstrap CSS #

Reactstrap 9.x对应Bootstrap 5.x版本，必须确保项目中正确引入该版本的Bootstrap CSS：

• 若通过npm安装了bootstrap包，在项目入口文件（如index.js或App.js）中添加导入语句：

  import 'bootstrap/dist/css/bootstrap.min.css';
  

• 若使用静态资源方式，将Bootstrap 5的CSS文件放入项目静态目录后，在public/index.html的<head>标签内引用。

2. 优化Caption渲染逻辑（可选） #

你的代码中部分幻灯片未设置caption字段，此时CarouselCaption会渲染空DOM元素，虽不影响核心功能，但可添加条件判断，仅在有标题内容时渲染组件：

const slides = comics.map((item) => {
  return (
    <CarouselItem
      onExiting={() => setAnimating(true)}
      onExited={() => setAnimating(false)}
      key={item.src}
    >
      <img src={item.src} alt={item.altText} />
      {/* 仅当存在caption时渲染标题组件 */}
      {item.caption && (
        <CarouselCaption
          captionText={item.caption}
          captionHeader={item.caption}
        />
      )}
    </CarouselItem>
  );
});

完成以上操作后，Carousel的标题会正常显示在当前激活幻灯片的底部居中位置，且仅当前幻灯片的标题会被展示。

内容的提问来源于stack exchange，提问作者jdcnosse