Antd Carousel如何实现缩略图点击联动切换主图

大家好，我有如下示例代码：

const App = () => {
  const mediaRef = useRef(null);
  const navRef = useRef(null);
  const [direction, setDirection] = useState(null);

  const onChange = (currentSlide) => {
    if (direction === "next") {
      mediaRef.current.goTo(currentSlide + 1, false);
    } else {
      mediaRef.current.goTo(currentSlide - 1, false);
    }
  };

  const handleNext = () => {
    setDirection("next");
    navRef.current.next();
  };

  const handlePrev = () => {
    setDirection("prev");
    navRef.current.prev();
  };

  const imageList = [ some images array ];
 return (
    <>
      <>
        <Carousel
          asNavFor={navRef.current}
          ref={mediaRef}
       >
          {imageList?.map((el, id) => (
            <ImageWrapper key={id}>
              <img src={el} alt={"name"} />
            </ImageWrapper>
          ))}
        </Carousel>
        {imageList?.length > 1 && (
          <>
            <Button onClick={handlePrev}>
              <LeftOutlined />
            </Button>
            <Button onClick={handleNext}>
              <RightOutlined />
             </Button>
          </>
        )}
      </>

      {imageList?.length > 1 && (
        <Carousel
          slidesToShow={3}
          centerMode={true}
          asNavFor={mediaRef.current}
          ref={(carousel) => (navRef.current = carousel)}
          beforeChange={onChange}
        >
          {imageList?.map((el, id) => (
            <>
              <divkey={id}>
                <img src={el} alt={"name"} />
              </div>
            </>
          ))}
        </Carousel>
      )}

      <>
        <Button onClick={handlePrev}>
          <LeftOutlined />
        </Button>
        <Button onClick={handleNext}>
          <RightOutlined />
        </Button>
      </>
    </>
  );
};

我目前基于antd Carousel组件实现了主图轮播+缩略图轮播的联动效果，添加了自定义前后切换箭头，点击上一页、下一页按钮时可自动同步切换主图与对应缩略图。
现在我需要为缩略图项绑定onClick点击事件，实现点击任意缩略图时，主图切换至对应图片、缩略图轮播也同步定位到选中项的效果，请问该如何实现？

直接按下面的逻辑改就行，核心是用Carousel实例自带的goTo(index, dontAnimate)方法做跳转，顺便修掉原有代码里的几个坑：

• 新增activeIndex状态统一存当前选中的轮播位置，避免按钮切换、点击缩略图两种操作的状态冲突
• 给每个缩略图项绑定点击事件，点击时先清空之前存的切换方向标记，同时调用主图、缩略图两个轮播实例的goTo方法，跳到对应索引
• 修正原代码里divkey={id}的语法错误（div和key之间漏空格会直接报编译错），删掉重复渲染的一组上下切换按钮
• 调整beforeChange回调逻辑：只有点前后按钮触发切换时才走方向判断，点缩略图时直接跳过这段逻辑，避免索引算错跳错位

改完的完整可运行代码如下：

const App = () => {
  const mediaRef = useRef(null);
  const navRef = useRef(null);
  const [direction, setDirection] = useState(null);
  // 新增当前激活索引状态
  const [activeIndex, setActiveIndex] = useState(0);

  const onChange = (oldIndex, currentSlide) => {
    // 手动点缩略图时跳过方向逻辑，避免跳错位
    if (!direction) return;
    mediaRef.current.goTo(currentSlide, false);
    setActiveIndex(currentSlide);
    // 方向用完就重置，不影响后续操作
    setDirection(null);
  };

  const handleNext = () => {
    setDirection("next");
    navRef.current.next();
  };

  const handlePrev = () => {
    setDirection("prev");
    navRef.current.prev();
  };

  // 缩略图点击逻辑
  const handleThumbClick = (index) => {
    setDirection(null);
    // 两个轮播同步跳转到对应索引
    mediaRef.current.goTo(index, false);
    navRef.current.goTo(index, false);
    setActiveIndex(index);
  };

  const imageList = [ /* 你的图片数组 */ ];
 return (
    <>
      <div>
        <Carousel ref={mediaRef}>
          {imageList?.map((el, id) => (
            <ImageWrapper key={id}>
              <img src={el} alt="name" />
            </ImageWrapper>
          ))}
        </Carousel>
        {imageList?.length > 1 && (
          <>
            <Button onClick={handlePrev}>
              <LeftOutlined />
            </Button>
            <Button onClick={handleNext}>
              <RightOutlined />
            </Button>
          </>
        )}
      </div>

      {imageList?.length > 1 && (
        <Carousel
          slidesToShow={3}
          centerMode={true}
          ref={(carousel) => (navRef.current = carousel)}
          beforeChange={onChange}
        >
          {imageList?.map((el, id) => (
            <div 
              key={id}
              onClick={() => handleThumbClick(id)}
              // 可选：给选中缩略图加高亮样式
              style={{ 
                opacity: activeIndex === id ? 1 : 0.5, 
                cursor: 'pointer',
                padding: '0 4px'
              }}
            >
              <img src={el} alt="name" style={{ width: '100%' }} />
            </div>
          ))}
        </Carousel>
      )}
    </>
  );
};

注意：antd Carousel底层基于react-slick封装，首次渲染时ref还没挂载，直接给asNavFor传ref.current会拿到null，后续ref更新也不会触发属性重传，很容易出现联动错位，直接手动通过goTo方法控制两个轮播的位置稳定性高很多。

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