Antd Carousel类组件转函数组件轮播联动失效排查

你的实现存在三个核心错误，直接导致双轮播联动失效：

• 两个Carousel组件共用同一个useRef实例，后渲染的缩略图轮播会覆盖ref存储的值，主轮播的实例完全无法获取，按钮控制、联动绑定的实例指向全部错误
• 编写的useEffect逻辑错误，依赖项包含了media和nav两个状态，每次状态更新都会把两个轮播实例重置为null，导致asNavFor始终拿不到有效的关联目标
• 没有复刻类组件的核心逻辑：类组件是分别存储两个轮播的独立实例，等组件挂载完成后再把实例存入state触发重渲染，让asNavFor拿到有效实例完成绑定，你的实现没有做实例分离和正确的初始化赋值。

实现要点：给两个轮播创建独立的ref，组件挂载完成后将ref挂载的真实轮播实例存入state，再将对应实例传给asNavFor完成双向绑定，上下页按钮直接操作主轮播实例即可，缩略图和主轮播的联动会由组件自动处理。

import { useState, useRef, useEffect } from 'react';
import { Carousel, Button } from 'antd';

const Gallery = () => {
  // 存储两个轮播的有效实例，用于asNavFor绑定
  const [mainCarousel, setMainCarousel] = useState(null);
  const [thumbCarousel, setThumbCarousel] = useState(null);
  // 为两个轮播分别创建独立ref，禁止共用
  const mainRef = useRef(null);
  const thumbRef = useRef(null);

  // 仅在组件挂载完成后，将ref上挂载的真实轮播实例存入state，触发重渲染完成绑定
  useEffect(() => {
    setMainCarousel(mainRef.current);
    setThumbCarousel(thumbRef.current);
  }, []);

  // 控制按钮仅需操作主轮播，联动逻辑会自动触发
  const handlePrev = () => mainRef.current.prev();
  const handleNext = () => mainRef.current.next();

  return (
    <>
      <Carousel
        asNavFor={thumbCarousel}
        touchMove={true}
        dots={false}
        ref={mainRef}
      >
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
      </Carousel>

      <Button onClick={handlePrev}>上一页</Button>
      <Button onClick={handleNext}>下一页</Button>

      <Carousel
        slidesToShow={2}
        asNavFor={mainCarousel}
        ref={thumbRef}
      >
        <div><h3>1</h3></div>
        <div><h3>2</h3></div>
        <div><h3>3</h3></div>
      </Carousel>
    </>
  );
};

export default Gallery;

注意：Antd Carousel基于react-slick封装，asNavFor属性必须接收真实的轮播实例才能生效，不能直接传入ref对象，必须等ref挂载完成拿到实例后再通过state传递，否则绑定会直接失效。

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