React中SwiperJS移除分页报错：无法在布尔值false上创建属性

错误原因 #

将pagination设为false后报错TypeError: Cannot create property 'clickable' on boolean 'false'，是因为代码中存在试图给布尔值false添加clickable属性的逻辑（可能是Swiper内部扩展、自定义代码或配置冲突）。

正确禁用分页的两种方案 #

方案一：使用对象配置禁用分页（推荐） #

不要直接将pagination设为false，改用对象形式设置enabled: false，避免类型冲突：

import { Swiper, SwiperSlide } from 'swiper/react';
import 'swiper/css';

const Carousel = () => {
  return (
    <Swiper
      // 其他配置项
      pagination={{
        enabled: false,
        // 若之前有clickable等属性，直接删除或注释即可
      }}
    >
      <SwiperSlide>轮播内容1</SwiperSlide>
      <SwiperSlide>轮播内容2</SwiperSlide>
    </Swiper>
  );
};

方案二：排查并修复属性赋值逻辑 #

如果坚持使用pagination: false，检查你的代码或引入的Swiper相关扩展，确保没有任何地方试图访问swiper.pagination.clickable这类属性——布尔值无法添加新属性，这类操作会直接抛出类型错误。

解决CSS隐藏无效的问题 #

如果想用CSS临时隐藏分页，需确保：

1. 选择器优先级足够，比如结合父容器类名：

/* 替换成你的轮播容器类名 */
.carousel-container .swiper-pagination {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

2. 确认CSS在Swiper官方样式之后加载，避免被覆盖。
3. 通过浏览器开发者工具检查分页元素是否存在：若已通过配置禁用分页，DOM中不会渲染分页元素，CSS自然无效。

内容的提问来源于stack exchange，提问作者Elie El Khoury