如何实现React Swiper根据屏幕分辨率自动响应式调整slidesPerView？

问题分析 #

你当前的代码直接通过window.innerWidth计算slidesPerView，但这个值只会在组件首次渲染时计算一次，窗口大小变化时不会触发组件重新渲染，所以必须刷新页面才会生效。下面提供两种可靠的解决方法：

方案一：使用Swiper内置的breakpoints配置（推荐） #

Swiper官方提供了响应式断点配置，能自动根据屏幕尺寸切换参数，无需手动监听窗口事件，是最简洁的实现方式：

<Swiper
  // 基础值，无匹配断点时生效
  slidesPerView={1}
  spaceBetween={30}
  pagination={{
    clickable: true,
  }}
  modules={[Pagination]}
  className="mySwiper"
  // 配置响应式断点
  breakpoints={{
    // 屏幕宽度 ≥551px 时显示2张
    551: {
      slidesPerView: 2,
    },
    // 屏幕宽度 ≥721px 时显示3张（优先级高于小断点）
    721: {
      slidesPerView: 3,
    }
  }}
>
  {cardApi.map((card) => (
    <SwiperSlide key={card.name}> {/* 将key移至SwiperSlide更符合React规范 */}
      <div className="testimonial__card">
        <div className="testimonial__card-top">
          <img src={card.profilePic} alt={card.name} />
          <div>
            <h4>{card.name}</h4>
            <p>{card.position}</p>
          </div>
        </div>
        <div className="testimonial__card-bottom">
          <p>{card.comment}</p>
        </div>
      </div>
    </SwiperSlide>
  ))}
</Swiper>

说明 #

• breakpoints的键为最小触发宽度（单位px），屏幕宽度达标时自动应用对应配置
• 断点配置优先级从大到小匹配，比如800px宽的屏幕会匹配721的规则，显示3张幻灯片
• 把key放在SwiperSlide上，避免列表渲染时的不必要重渲染

方案二：React状态+窗口resize监听 #

如果需要自定义逻辑，可以通过React状态结合resize事件监听实现：

import { useState, useEffect } from 'react';

// 组件内部逻辑
const [slidesPerView, setSlidesPerView] = useState(1);

useEffect(() => {
  // 计算幻灯片数量的函数
  const updateSlidesCount = () => {
    const width = window.innerWidth;
    if (width <= 550) {
      setSlidesPerView(1);
    } else if (width <= 720) {
      setSlidesPerView(2);
    } else {
      setSlidesPerView(3);
    }
  };

  // 初始化计算
  updateSlidesCount();

  // 添加窗口resize监听
  window.addEventListener('resize', updateSlidesCount);

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

// 渲染Swiper组件
return (
  <Swiper
    slidesPerView={slidesPerView}
    spaceBetween={30}
    pagination={{
      clickable: true,
    }}
    modules={[Pagination]}
    className="mySwiper"
  >
    {cardApi.map((card) => (
      <SwiperSlide key={card.name}>
        <div className="testimonial__card">
          <div className="testimonial__card-top">
            <img src={card.profilePic} alt={card.name} />
            <div>
              <h4>{card.name}</h4>
              <p>{card.position}</p>
            </div>
          </div>
          <div className="testimonial__card-bottom">
            <p>{card.comment}</p>
          </div>
        </div>
      </SwiperSlide>
    ))}
  </Swiper>
);

说明 #

• 通过useState维护幻灯片数量状态，状态更新会触发组件重渲染
• useEffect中绑定resize事件，每次窗口尺寸变化时重新计算并更新状态
• 必须在组件卸载时移除事件监听，避免内存泄漏

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