React18中使用swiper@6.8.4，出现了报错TypeError: Cannot read properties of undefined (reading ‘wrapperClass‘)

---

章节回顾

之前写过一篇在react中使用swiper：

https://blog.csdn.net/tuzi007a/article/details/123347867

该篇介绍的是react17中使用的swiper@5.4.5和swiper@6.8.4

很好用。

但是在react18中使用swiper@6.8.4，就遇到了问题。

---

遇到了什么问题

当在react18中使用swiper@6.8.4时，出现了如下报错：

TypeError: Cannot read properties of undefined (reading 'wrapperClass')

---

思路历程

刚开始是完全懵逼的，一直在用swiper，怎么突然就不能用了呢？？？

百度资料极少，于是带着疑问，去看了swiper在github上的issue，

发现这么一篇：

https://github.com/nolimits4web/swiper/issues/5398

该篇issue给出了解释：

大致可以理解为，在react18中使用是strictMode模式，也就是StrictMode组件：

这一组件会导致在组件加载时，无法获取到swiper的类。于是报错。

所以，不使用该组件，就可以正常使用swiper@6.8.4。

然而，事情并没有那么简单，StrictMode组件在开发模式中有非常多的好处：

不应该去掉。

那么，既要使用StrictMode，又想使用swiper，该咋办嘞？

---

在StrictMode下使用swiper

要怎么做呢？

于是继续看其他issue，找寻答案。

在其中一个issue中，找到了这么一条：

这个老哥给提示，使用swiper@8.0.1

抱着试试的心态，开始安装

npm i swiper@8.0.1

打开swiper官网：

https://swiperjs.com/react#installation

遵照官方文档，开始在react18中写demo 。

经测试，确实可以使用。问题得到解决。

---

解决方法总结

方法一

在react18中不使用React.StrictMode组件(不建议)

方法二

继续使用React.StrictMode组件，同时使用swiper@8.0.1(推荐)

---

如何使用swiper@8.0.1

该版本与之前版本差别还是挺大的，

Swiper, SwiperSlide 从 'swiper/react'中引入

其他功能要从swiper中引入，比如

import { Autoplay, Pagination } from 'swiper'

使用这些功能，要加入modules数组中，即：

modules={[Autoplay, Pagination]}

swiper样式要从css中引入：

import 'swiper/css'

其他功能组件的样式，需要单独引入

下面以demo为例，具体说明使用方法：

SwiperComponent.jsx

/**
 * swiper@8.0.1 demo
 * 为了解决低版本swiper在react18的strictMode模式下不能使用的问题
 */
import React from 'react'
import './index.css'
import { Swiper, SwiperSlide } from 'swiper/react'
import { Autoplay, Pagination } from 'swiper'
import 'swiper/css'
import 'swiper/css/pagination'

const SwiperComponent = () => {
  return <div className='wrap'>
    <Swiper
      modules={[Autoplay, Pagination]}
      // direction='vertical'
      style={{ width: '100%' }}
      autoplay
      loop
      pagination={{
        clickable: true,
        bulletClass: 'my-bullet',
        bulletActiveClass: 'my-bullet-active',
      }}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
      <SwiperSlide>Slide 4</SwiperSlide>
    </Swiper>
  </div>
}

export default SwiperComponent

css样式

.wrap {
  position: relative;
  width: 400px;
  height: 80px;
  text-align: center;
  line-height: 80px;
  border: 1px solid pink;
  margin: auto;
}

.swiper-pagination {
  bottom: 0px!important;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.swiper-pagination .my-bullet {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: pink;
}

.swiper-pagination .my-bullet.my-bullet-active {
  background-color: blue;
}

轮播图效果

Swiper标签中的属性，比如autoplay , loop , pagination, direction等，

使用方法和之前版本都是一样的，不再赘述，

单独说下如何修改分页器，自定义分页器样式。

---

设置自己的分页器样式

以上面的demo为例，对pagination进行配置：

pagination={{
  // 切记：这里不要写el配置项，写了就无效了...
  clickable: true,
  bulletClass: 'my-bullet', // 设置小圆点的类名为my-bullet
  bulletActiveClass: 'my-bullet-active', // 设置小圆点激活时的类名为my-bullet-active
}}

再写自己的小圆点样式：

.swiper-pagination {
  bottom: 0px!important; /* 取最高优先级，覆盖原有定位 */
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.swiper-pagination .my-bullet {
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background-color: pink;
}

.swiper-pagination .my-bullet.my-bullet-active {
  background-color: blue;
}

完成任务。

---