Splide.js + React 自定义缩略图多幻灯片.sync()方法不生效

现有代码的同步逻辑存在三个核心问题：

• sync()执行时机错误：同步逻辑写在依赖mainRef.current的useEffect中，但模态框是条件渲染的——modalExpanded为false时HeroModal完全未挂载，modalRef.current始终为null，同步逻辑从未真正执行。
• 轮播配置不兼容：主轮播开启isNavigation: true且类型为slide，模态框轮播类型为loop，二者索引计算逻辑存在差异，即使同步也容易出现索引偏移。
• 打开模态框时未主动对齐索引：即使同步逻辑生效，模态框初始化时默认从第0张加载，不会主动读取主轮播当前的展示位置。

1. 调整同步逻辑执行时机 #

把同步逻辑移到模态框打开后执行，不要在父组件初始加载时尝试同步，同时在模态框关闭时销毁同步绑定避免内存泄漏。
修改Hero.tsx中的useEffect逻辑：

// 删除原有仅依赖mainRef.current的useEffect，替换为以下代码
useEffect(() => {
  // 仅在模态框打开、两个Splide实例都完成初始化时执行同步
  if (modalExpanded && mainRef.current?.splide && modalRef.current?.splide) {
    // 先主动跳转到主轮播当前索引，保证打开即对齐
    modalRef.current.go(mainRef.current.splide.index);
    // 执行双向同步绑定
    mainRef.current.sync(modalRef.current.splide);
  }

  return () => {
    // 模态框关闭时解除同步
    if (mainRef.current?.splide && modalRef.current?.splide) {
      mainRef.current.unsync(modalRef.current.splide);
    }
  }
}, [modalExpanded]);

2. 统一两个轮播的核心配置 #

将主轮播和模态框轮播的type参数保持一致，关闭主轮播不必要的导航配置，避免索引计算冲突。
修改Hero.tsx中的mainOptions：

const mainOptions: Options = {
  type: 'loop', // 和模态框配置保持一致
  perPage: 1,
  perMove: 1,
  gap: 0,
  autoWidth: false,
  pagination: false,
  isNavigation: false, // 关闭导航属性避免同步冲突
};

3. 补全组件导入 #

两个文件中都直接使用了Splide、SplideSlide组件但未写入导入语句，在两个组件的import区域补充以下代码：

import { Splide, SplideSlide } from '@splidejs/react-splide';

4. 对齐缩略图激活状态 #

现有代码中主页面和模态框的缩略图激活状态是独立维护的，打开模态框时需要把主轮播当前索引传入模态框作为初始状态：

• 给HeroModal组件新增currentIndex: number入参
• 父组件渲染HeroModal时，将mainRef.current.splide.index作为currentIndex传入
• 模态框内的clickedThumb状态初始值直接使用传入的currentIndex，不要默认赋值为undefined

修改完成后测试三个核心场景：

• 主轮播切换到任意索引后点击主图，模态框打开直接展示对应图片，缩略图激活状态匹配
• 模态框内切换图片后关闭，主轮播自动停留在对应索引位置
• 主页面和模态框内的缩略图点击跳转逻辑正常，无索引错位

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