React+Splide.js点击静态缩略图调用.go()跳转指定幻灯片

TS报错Property 'go' does not exist on type 'RefObject<Splide>'是因为两个写法错误：

• useRef返回的是包含current属性的ref对象，不能直接在ref对象上调用实例方法
• @splidejs/react-splide组件ref的current指向React组件实例，真正带go()、on()等API的核心轮播实例，存放在组件实例的splide字段下，原有写法没有取到这个核心实例。
  另外原代码中用require导入缩略图的写法，在Vite等现代构建工具下容易出现静态资源解析错误，建议统一用import导入。

1. 调整ref的类型声明，指向正确的Splide React组件类型
2. 调用API时通过ref.current.splide拿到核心轮播实例，做空值安全判断后再调用go()方法
3. 替换require写法，用ESModule规范导入所有静态图片资源
4. （可选）增加激活态逻辑，实现点击缩略图后对应缩略图高亮的交互

import { Splide, SplideSlide } from '@splidejs/react-splide';
import { Options } from '@splidejs/splide';
import type { Splide as SplideInstance } from '@splidejs/react-splide';
import { useRef, useState } from 'react';

import '@splidejs/react-splide/css';
import './Hero.scss';

// 主图导入
import p1 from '../assets/image-product-1.jpg';
import p2 from '../assets/image-product-2.jpg';
import p3 from '../assets/image-product-3.jpg';
import p4 from '../assets/image-product-4.jpg';
// 缩略图统一用import导入，替换require
import t1 from '../assets/image-product-1-thumbnail.jpg';
import t2 from '../assets/image-product-2-thumbnail.jpg';
import t3 from '../assets/image-product-3-thumbnail.jpg';
import t4 from '../assets/image-product-4-thumbnail.jpg';

export default function Hero() {
  const thumbsImages = [t1, t2, t3, t4];
  // 记录当前激活的幻灯片索引，用于缩略图高亮
  const [activeIndex, setActiveIndex] = useState(0);

  const mainOptions: Options = {
    type: 'loop',
    perPage: 1,
    perMove: 1,
    gap: '1rem',
    pagination: false,
    height: '27.8125rem',
  };

  // 声明ref，类型正确，初始值为null
  const mainRef = useRef<SplideInstance | null>(null);

  const handleThumbs = (targetIndex: number) => {
    // 安全判断实例存在后，取splide核心实例调用go方法
    mainRef.current?.splide?.go(targetIndex);
  };

  return (
    <>
      <Splide
        options={mainOptions}
        ref={mainRef}
        // 监听幻灯片切换事件，同步更新激活索引
        onMoved={(_, newIndex) => setActiveIndex(newIndex)}
      >
        <SplideSlide>
          <img src={p1} alt="product image 1" />
        </SplideSlide>
        <SplideSlide>
          <img src={p2} alt="product image 2" />
        </SplideSlide>
        <SplideSlide>
          <img src={p3} alt="product image 3" />
        </SplideSlide>
        <SplideSlide>
          <img src={p4} alt="product image 4" />
        </SplideSlide>
      </Splide>

      <ul className="thumbnails">
        {thumbsImages.map((thumbnail, index) => (
          <li key={index}>
            <button
              onClick={() => handleThumbs(index)}
              // 匹配激活索引加高亮类名
              className={activeIndex === index ? 'thumb-active' : ''}
            >
              <img src={thumbnail} alt="product thumbnail" />
            </button>
          </li>
        ))}
      </ul>
    </>
  );
}

这个实现完全匹配需求：缩略图是静态按钮无轮播效果，点击即可跳转到对应索引的幻灯片，手动拖动/点击前后箭头切换轮播时，缩略图也会同步高亮。

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