react-bootstrap轮播无激活项，参照官方示例仍失效，求排查

问题1：React类名属性误用 #

React中给组件添加样式类必须用className，而非HTML原生的class。你在<Carousel>标签里写的class="mt-5"不符合React语法规范，会导致Carousel组件无法正常初始化，进而所有轮播项都处于未激活状态。

修改后的Carousel标签：

<Carousel className="mt-5">

额外确认项 #

• 确保已正确导入react-bootstrap的Carousel组件：

  import { Carousel } from 'react-bootstrap';
  

• 必须引入Bootstrap的CSS样式（react-bootstrap依赖该样式实现交互与视觉效果），在项目入口文件（如index.js）中添加：

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

修正后的完整代码示例 #

function Project({ href, title, img, description }) {
    return (
        <Carousel.Item className="work-carousel-item">
            <img className="d-block w-100" src={img} alt={title}/>
            <Carousel.Caption>
                <h3>{title}</h3>
                <p>{description}</p>
            </Carousel.Caption>
        </Carousel.Item>
    );
}

function Work() {
    return (
        <section id="work">
            <Carousel className="mt-5">
                <Project href="#" title="Example 1" img={ImgVkMeshShaderExample} description="I'm a description"/>
                <Project href="#" title="Example 1" img={ImgVkMeshShaderExample} description="I'm a description 2"/>
            </Carousel>
        </section>
    )
}

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