React中如何通过onClick事件向Swiper滑块添加Card元素

核心靠React状态驱动视图更新，别直接手动操作Swiper的DOM插元素——React虚拟DOM和真实DOM不同步很容易出渲染bug。只要用state存所有要展示的卡片数据，点击事件触发时更新state，Swiper会自动遍历新的state渲染滑块，额外开Swiper自带的监听配置就能解决新增滑块不识别的问题。

• 先安装项目所需的Swiper依赖
• 用React的useState定义存储卡片列表的状态，初始值可以放默认要展示的卡片数据
• 给触发按钮绑定onClick事件，事件回调里用不可变更新的方式往卡片列表状态里追加新的卡片数据
• 在Swiper组件内部遍历卡片状态，每一项用SwiperSlide包裹自定义Card组件渲染
• 给Swiper开启DOM监听属性，避免新增滑块后实例不更新导致滑动异常

import { useState } from 'react';
// 导入Swiper的React适配组件
import { Swiper, SwiperSlide } from 'swiper/react';
// 导入Swiper基础样式
import 'swiper/css';
// 导入自定义的Card组件，替换成你项目里的实际组件路径即可
import Card from './components/Card';

export default function DynamicSwiperDemo() {
  // 初始化卡片列表，默认渲染2个初始卡片
  const [cardList, setCardList] = useState([
    { id: 1, title: '初始卡片1', content: '轮播默认展示的第一个卡片' },
    { id: 2, title: '初始卡片2', content: '轮播默认展示的第二个卡片' }
  ]);

  // 点击触发的添加卡片逻辑
  const handleAddCard = () => {
    const newCardId = Date.now(); // 用时间戳生成唯一id，避免重复
    const newCard = {
      id: newCardId,
      title: `动态新增卡片`,
      content: `点击按钮后新增的卡片，生成时间：${new Date().toLocaleTimeString()}`
    };
    // 不可变更新：生成新数组替换原状态，禁止直接push修改原数组
    setCardList(prevList => [...prevList, newCard]);
  };

  return (
    <div style={{ width: '80%', margin: '0 auto' }}>
      <button
        onClick={handleAddCard}
        style={{ padding: '8px 16px', marginBottom: 20, cursor: 'pointer' }}
      >
        点击添加新卡片到轮播
      </button>

      <Swiper
        spaceBetween={20}
        slidesPerView={1}
        // 开启DOM监听，自动识别子元素变化更新轮播实例
        observer={true}
        observeParents={true}
      >
        {cardList.map(card => (
          <SwiperSlide key={card.id}>
            <Card data={card} />
          </SwiperSlide>
        ))}
      </Swiper>
    </div>
  );
}

• 不要用原生DOM操作比如appendChild往Swiper节点里插卡片，会导致React虚拟DOM和真实DOM不一致，后续更新、销毁组件时大概率出渲染错乱或者内存泄漏问题。
• 遍历SwiperSlide时必须给每个滑块传唯一的key属性，不要用数组下标当key，否则新增卡片时会因为DOM复用错误出现内容错位。
• 如果开了observer还是遇到新增卡片后滑不动、宽度计算错误的问题，可以通过Swiper的onSwiper回调拿到实例，在状态更新完成后调用swiper.update()强制重算轮播参数即可。
• 如果使用的是Swiper 8以下的旧版本，部分配置属性名可能有差异，对应匹配所用版本的参数写法就行。

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