React中Bootstrap Carousel组件不显示问题求助

我在React项目中引入Bootstrap Carousel组件，通过开发者工具能看到对应的DOM结构，但页面上完全看不到图片、控制按钮等内容。相关CSS文件均为空，页面显示异常，请求排查问题。

Carousel组件代码 #

import React, { Component } from 'react'  
import 'bootstrap/dist/css/bootstrap.css';
import Carousel from 'react-bootstrap/Carousel';
export class BootstrapCarouselDemo extends Component {  
        render() {  
                return (  
                        <div>  
                         <div class='container-fluid' >  
                          <div className="row title" style={{ marginBottom: "20px" }} >  
                          <div class="col-sm-12 btn btn-warning">  
                          How To Use Bootstrap Carousel In ReactJS  
                         </div>  
                         </div>  
                         </div>  
                         <div className='container-fluid' >  
                         <Carousel interval={600} keyboard={false} pauseOnHover={true}>  
                         <Carousel.Item style={{'height':"300px"}}  >  
                         <img style={{'height':"300px"}}  
                         className="d-block w-100"  
                        src={'https://mir-s3-cdn-cf.behance.net/projects/max_808_webp/83651f42216893.Y3JvcCw5MjAsNzIwLDQzLDI4OA.jpg'}  />  
                           <Carousel.Caption>  
                             <h3>First Demo </h3>  
                                 </Carousel.Caption>  
                                 </Carousel.Item  >  
                                 <Carousel.Item style={{'height':"300px"}}>  
                                 <img style={{'height':"300px"}}  
                                   className="d-block w-100"  
                                    src={'https://mir-s3-cdn-cf.behance.net/project_modules/fs/29420f102309951.5f552c178f734.png'}    />  
                                       <Carousel.Caption>  
                                   <h3>Second Demo</h3>  
                                      </Carousel.Caption>  
                                         </Carousel.Item>  
                                       <Carousel.Item style={{'height':"300px"}}>  
                                       <img style={{'height':"300px"}}  
                                        className="d-block w-100"  
                                         src={'https://as2.ftcdn.net/v2/jpg/03/62/76/21/1000_F_362762187_IH7I1y3UQfbFx4Rl3voGtIhiWkZIlJvu.jpg'}   />  
                                        <Carousel.Caption>  
                                          <h3>Third Demo</h3>  
                                          </Carousel.Caption>  
                                         </Carousel.Item>  
                                        </Carousel>  
                                </div>  
                        </div>  
                )  
        }  
}  
  
export default BootstrapCarouselDemo  

页面组件代码 #

import React from "react";
import Footer from '../Components/Footer';
import Navbar from '../Components/Navbar';

import BootstrapCarouselDemo from "../Components/LCLandBanner"

import './Live.css';
const Live = () => {
    return (
        <>

            <Navbar />
            <section>
                <div>
            <BootstrapCarouselDemo></BootstrapCarouselDemo> 
            </div>
            </section>
            <div>
                "hello"
            </div>
            <Footer />
        </>
    )
}

export default Live;

排查方向 #

• 依赖安装完整性检查：确认已正确安装bootstrap和react-bootstrap包，执行命令：

  npm install bootstrap react-bootstrap
  

• CSS引入顺序问题：尝试在项目入口文件（如index.js）中全局引入bootstrap/dist/css/bootstrap.css，避免组件内引入可能的加载顺序导致样式失效。
• 类名拼写规范：React中需统一使用className替代class，将组件中所有<div class='xxx' >改为<div className='xxx' >，排除潜在样式解析问题。
• 图片资源验证：直接在浏览器打开图片URL，确认资源可正常访问、无跨域限制或链接失效情况。
• 组件导入正确性：检查../Components/LCLandBanner文件的导出名称是否确实为BootstrapCarouselDemo，避免导入错误导致组件渲染异常。
• 父元素布局影响：临时移除<Navbar />和<Footer />组件，单独测试轮播是否正常显示，排查是否存在父元素设置overflow:hidden、z-index过高等遮挡问题。

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