React项目引入Bootstrap不生效，轮播点击切换卡片功能异常如何解决

问题修复方案 #

1. Bootstrap 依赖缺失问题

你仅引入了Bootstrap的CSS文件，轮播组件运行必需的JS和Popper依赖没有引入，且原生依赖jQuery的Bootstrap版本不适合直接在React项目中使用，按以下方式修正：

• 先安装完整依赖：npm install bootstrap @popperjs/core
• 在项目入口文件（如index.jsx）顶部全局引入资源，不要在业务组件内单独引入CSS：

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

2. 轮播结构嵌套错误

你当前的轮播DOM结构不符合Bootstrap规范，第二页的carousel-item被嵌套在第一页的卡片容器内部，导致轮播无法识别多页内容，且Sdata遍历逻辑错误，会将所有卡片堆叠在同一页。

3. 修正后的代码示例

Sdata.jsx （无需改动）

const Sdata =[
    {
        imgsrc: work2,
        title: "Android Application",
        href: "https://mybestdjangoblog.herokuapp.com/",
    },
    {
        imgsrc: work3,
        title: "Android Application",
        href: "https://mybestdjangoblog.herokuapp.com/",
    }
];
export default Sdata;

Card.jsx （无需改动）

function Card(props){
    return(
        <>
            <img className="card-img-top"
                src={props.imgsrc} alt="项目封面" />
            <div className="card-body">
                <h4 className="card-title">{props.title}</h4>
                <p className="card-text">Some quick example text to build on the card title and make up the bulk of the
                    card's content.</p>
                <a href={props.href} className="btn btn-primary" target="_blank" rel="noreferrer">View Project</a>
            </div>
        </>
    );
};
export default Card;

Work.jsx （完整修正版）

import Card from './Card';
import Sdata from './Sdata';
// 此处补充引入你用到的work1等静态资源

const Work =() =>{
    return(
      <>
        <div id="multi-item-example" className="carousel slide" data-bs-ride="carousel">
          {/* 轮播控制按钮 */}
          <div className="controls-top mb-3 text-center">
            <button className="btn btn-floating" data-bs-target="#multi-item-example" data-bs-slide="prev">
              <i className="fas fa-chevron-left"></i>
            </button>
            <button className="btn btn-floating ms-2" data-bs-target="#multi-item-example" data-bs-slide="next">
              <i className="fas fa-chevron-right"></i>
            </button>
          </div>

          {/* 轮播指示器 */}
          <ol className="carousel-indicators">
            <li data-bs-target="#multi-item-example" data-bs-slide-to="0" className="active"></li>
            {Sdata.map((_, ind) => (
              <li key={ind+1} data-bs-target="#multi-item-example" data-bs-slide-to={ind+1}></li>
            ))}
          </ol>
          
          {/* 轮播内容区 */}
          <div className="carousel-inner" role="listbox">
            {/* 第一页：单独的work1卡片 */}
            <div className="carousel-item active">
              <div className="col-md-3 mx-auto">
                <div className="card mb-2">
                  <img className="card-img-top"
                  src={work1} alt="项目封面" />
                  <div className="card-body">
                  <h4 className="card-title">Android Application</h4>
                  <p className="card-text">Some quick example text to build on the card title and make up the bulk of the
                      card's content.</p>
                  <a href="https://mybestdjangoblog.herokuapp.com/" className="btn btn-primary" target="_blank" rel="noreferrer">View Project</a>
                </div>
              </div>
            </div>
            {/* 后续页：遍历Sdata生成多页卡片 */}
            {Sdata.map((val, ind) => (
              <div key={ind} className="carousel-item">
                <div className="col-md-3 mx-auto">
                  <div className="card mb-2">
                    <Card imgsrc={val.imgsrc} title={val.title} href={val.href}/>
                  </div>
                </div>
              </div>
            ))}
          </div>
        </div>        
      </>
    )
}
export default Work;

补充说明

• 如果你使用的是Bootstrap 4版本，将代码中所有data-bs-前缀的属性替换为data-即可正常运行
• 代码中的fas图标属于Font Awesome资源，如需正常显示箭头图标，可自行引入Font Awesome的CSS文件，或直接用文字替换图标内容

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