React中Swiper.js自定义分页组件报错[object Object]求助

出现这个问题的核心原因是你直接把React元素（SVG）当成字符串返回给了renderBullet，而Swiper默认会把返回值当作文本渲染，所以才会显示[object Object]。正确的做法是让renderBullet返回JSX元素，同时确保分页配置正确。

正确配置示例 #

假设你的图标数组是iconList，每个元素是SVG组件：

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

// 你的SVG图标组件数组
const iconList = [
  <svg key="icon1" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>,
  <svg key="icon2" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>,
  <svg key="icon3" viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 17h-2v-2h2v2zm2.07-7.75l-.9.92C13.45 12.9 13 13.5 13 15h-2v-.5c0-1.1.45-2.1 1.17-2.83l1.24-1.26c.37-.36.59-.86.59-1.41 0-1.1-.9-2-2-2s-2 .9-2 2H8c0-2.21 1.79-4 4-4s4 1.79 4 4c0 .88-.36 1.68-.93 2.25z"/></svg>,
];

function MySwiper() {
  return (
    <Swiper
      modules={[Pagination]}
      pagination={{
        enabled: true,
        type: 'bullets',
        // 关键：renderBullet返回JSX元素，而非字符串
        renderBullet: (index, className) => {
          // 从图标数组取对应SVG，加上Swiper的分页类名保证样式
          return (
            <span className={className}>
              {iconList[index]}
            </span>
          );
        },
      }}
    >
      <SwiperSlide>Slide 1</SwiperSlide>
      <SwiperSlide>Slide 2</SwiperSlide>
      <SwiperSlide>Slide 3</SwiperSlide>
    </Swiper>
  );
}

export default MySwiper;

关键注意点 #

• 必须给自定义的分页元素加上className参数，这个类名包含Swiper分页的默认样式和交互逻辑，否则分页可能无法正常响应点击或显示状态。
• 确保iconList的长度和轮播幻灯片数量一致，避免索引越界。
• 如果你的SVG是单独的组件（比如Icon1、Icon2），直接在renderBullet里渲染组件即可，比如{<Icon1 />}。
• 检查Swiper版本：不同版本的pagination配置可能略有差异，确保你的配置和当前使用的Swiper版本文档一致（比如v10+的modules导入方式）。

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