在React中实现移动端Carousel，桌面端转为普通Div的方法

办法1：靠Bootstrap响应式类+CSS搞定（少写JS） #

不用搞复杂的监听，直接用Bootstrap自带的断点类控制两个容器的显示，再用CSS禁用桌面端轮播的多余功能：

• 同时写好移动端轮播和桌面端普通布局两个结构
• 用d-block d-md-none让轮播只在移动端显示，d-none d-md-block让普通Div只在桌面端显示
• 加个小CSS确保桌面端轮播彻底隐藏，不会残留交互

示例代码：

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

const ResponsiveCarousel = () => {
  const carouselItems = [
    { id: 1, content: '内容1', img: '/path/to/img1.jpg' },
    { id: 2, content: '内容2', img: '/path/to/img2.jpg' },
    { id: 3, content: '内容3', img: '/path/to/img3.jpg' },
  ];

  return (
    <div className="container">
      {/* 移动端轮播 */}
      <div id="mobileCarousel" className="carousel slide d-block d-md-none" data-bs-ride="carousel">
        <div className="carousel-indicators">
          {carouselItems.map(item => (
            <button key={item.id} type="button" data-bs-target="#mobileCarousel" data-bs-slide-to={item.id - 1} className={item.id === 1 ? 'active' : ''} aria-current={item.id === 1 ? 'true' : 'false'} aria-label={`Slide ${item.id}`}></button>
          ))}
        </div>
        <div className="carousel-inner">
          {carouselItems.map(item => (
            <div key={item.id} className={`carousel-item ${item.id === 1 ? 'active' : ''}`}>
              <img src={item.img} className="d-block w-100" alt={`Slide ${item.id}`} />
              <div className="carousel-caption">
                <p>{item.content}</p>
              </div>
            </div>
          ))}
        </div>
        <button className="carousel-control-prev" type="button" data-bs-target="#mobileCarousel" data-bs-slide="prev">
          <span className="carousel-control-prev-icon" aria-hidden="true"></span>
          <span className="visually-hidden">上一张</span>
        </button>
        <button className="carousel-control-next" type="button" data-bs-target="#mobileCarousel" data-bs-slide="next">
          <span className="carousel-control-next-icon" aria-hidden="true"></span>
          <span className="visually-hidden">下一张</span>
        </button>
      </div>

      {/* 桌面端普通布局 */}
      <div className="d-none d-md-block row g-4">
        {carouselItems.map(item => (
          <div key={item.id} className="col-md-4">
            <img src={item.img} className="w-100 rounded" alt={`Item ${item.id}`} />
            <p className="mt-2">{item.content}</p>
          </div>
        ))}
      </div>
    </div>
  );
};

export default ResponsiveCarousel;

配套CSS：

/* 防止桌面端轮播残留显示 */
#mobileCarousel.d-md-none {
  display: block !important;
}
#mobileCarousel:not(.d-md-none) {
  display: none !important;
}

办法2：React监听窗口宽度动态切换 #

如果需要自定义断点（不想用Bootstrap默认的768px），可以用React的状态监听窗口尺寸：

import React, { useState, useEffect } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import 'bootstrap/dist/js/bootstrap.bundle.min'; // 必须引Bootstrap JS，不然轮播动不了

const ResponsiveCarousel = () => {
  // 初始判断窗口宽度，Bootstrap md断点是768px，可自己改
  const [isMobile, setIsMobile] = useState(window.innerWidth < 768);
  const carouselItems = [/* 内容同办法1 */];

  useEffect(() => {
    const handleResize = () => {
      setIsMobile(window.innerWidth < 768);
    };

    window.addEventListener('resize', handleResize);
    // 组件卸载时移除监听，避免内存泄漏
    return () => window.removeEventListener('resize', handleResize);
  }, []);

  return (
    <div className="container">
      {isMobile ? (
        <div id="mobileCarousel" className="carousel slide" data-bs-ride="carousel">
          {/* 轮播结构同办法1 */}
        </div>
      ) : (
        <div className="row g-4">
          {/* 桌面端布局同办法1 */}
        </div>
      )}
    </div>
  );
};

export default ResponsiveCarousel;

注意点 #

• 一定要引入Bootstrap的JS文件（bootstrap.bundle.min.js），不然轮播的切换、自动播放这些交互都用不了
• 用办法2的话，页面加载时要先判断一次窗口宽度，不然刚打开页面可能显示错误
• 自定义断点时尽量和Bootstrap的断点对齐，避免样式冲突

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