React轮播组件异常：移除current-slide类名后自动恢复

问题核心 #

在React项目中改造纯JS轮播组件，使用Ref操作DOM替代直接DOM修改。初始化时在依赖topMovies的useEffect中为第一个幻灯片添加current-slide类，加载时正常。但点击切换按钮移除该类后，约1秒类名会自动恢复，添加isLoading条件判断也无法解决。

问题原因 #

1. useEffect重复触发：useEffect依赖topMovies，若父组件重新渲染导致topMovies的引用变化（即使内容未变），useEffect会重新执行，再次给第一个幻灯片添加current-slide类。
2. DOM操作与React虚拟DOM冲突：手动修改DOM类名违背React的虚拟DOM渲染机制，React在重新渲染时会以虚拟DOM为基准覆盖手动修改的DOM属性。
3. isLoading判断无效：if (topMovies && setIsLoading)中的setIsLoading是状态更新函数，永远为真值，导致isLoading状态未起到阻止重复执行的作用。

解决方案 #

1. 用React状态管理当前幻灯片：不再手动操作DOM类名，改用状态currentIndex控制当前激活的幻灯片，让React负责渲染逻辑。
2. 移除useEffect中的DOM类名操作：仅保留幻灯片位置初始化逻辑，类名由渲染时的状态决定。
3. 修正幻灯片切换的DOM获取逻辑：修复nextSlide中获取下一张幻灯片的错误写法。

修改后的完整代码 #

import { useState, useEffect, useRef } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faCircleLeft, faCircleRight } from '@fortawesome/free-solid-svg-icons';

const Carouselv2 = ({ topMovies }) => {
    // Refs
    const trackRef = useRef();
    const nextBtnRef = useRef();
    const prevBtnRef = useRef();
    const navDotsRef = useRef();

    // 用状态管理当前幻灯片索引
    const [currentIndex, setCurrentIndex] = useState(0);
    const [isLoading, setIsLoading] = useState(true);

    // 初始化幻灯片位置（仅处理布局，不操作类名）
    useEffect(() => {
        if (!topMovies) return;
        
        const slides = Array.from(trackRef.current.children);
        if (slides.length === 0) return;

        const slideWidth = slides[0].getBoundingClientRect().width;
        const setSlidePosition = (slide, index) => {
            slide.style.left = `${slideWidth * index}px`;
        };
        slides.forEach(setSlidePosition);

        // 重置当前索引到第一个（当topMovies更新时）
        setCurrentIndex(0);
        setIsLoading(false);
    }, [topMovies]);

    // 切换到目标幻灯片
    const moveToSlide = (targetIndex) => {
        setCurrentIndex(targetIndex);
        // 处理轨道位移
        const slides = Array.from(trackRef.current.children);
        const slideWidth = slides[0].getBoundingClientRect().width;
        trackRef.current.style.transform = `translateX(-${slideWidth * targetIndex}px)`;
    };

    // 下一张幻灯片
    const nextSlide = () => {
        if (isLoading) return;
        const nextIndex = (currentIndex + 1) % topMovies.length;
        moveToSlide(nextIndex);
    };

    // 上一张幻灯片
    const prevSlide = () => {
        if (isLoading) return;
        const prevIndex = (currentIndex - 1 + topMovies.length) % topMovies.length;
        moveToSlide(prevIndex);
    };

    return (
        <div className="carousel">
            <button 
                className="carousel_button carousel_button--left" 
                ref={prevBtnRef}
                onClick={prevSlide}
                disabled={isLoading}
            >
                <FontAwesomeIcon icon={faCircleLeft} size="xl" style={{ color: "white" }} />
            </button>
            <div className="carousel_track-container">
                <ul className="carousel_track" ref={trackRef}>
                    {topMovies?.map((movie, index) => (
                        <li 
                            key={movie.id} // 添加唯一key符合React规范
                            className={`carousel_slide ${index === currentIndex ? 'current-slide' : ''}`}
                        >
                            <img src={movie.image} alt={movie.title} />
                            <h2>{movie.title}</h2>
                        </li>
                    ))}
                </ul>
            </div>
            <button 
                onClick={nextSlide}
                className="carousel_button carousel_button--right" 
                ref={nextBtnRef}
                disabled={isLoading}
            >
                <FontAwesomeIcon icon={faCircleRight} size="xl" style={{ color: "white" }} />
            </button>
            <div className="carousel_nav" ref={navDotsRef}>
                {topMovies?.map((_, index) => (
                    <button 
                        key={index}
                        className={`carousel_indicator ${index === currentIndex ? 'current-slide' : ''}`}
                        onClick={() => moveToSlide(index)}
                    ></button>
                ))}
            </div>
        </div>
    );
};

export default Carouselv2;

关键修改点 #

• 添加currentIndex状态，通过状态控制current-slide类的添加，完全由React管理渲染。
• 移除useEffect中手动添加类名的逻辑，改为状态驱动渲染。
• 修复nextSlide的切换逻辑，通过索引计算替代DOM元素获取，避免DOM操作的不确定性。
• 为幻灯片和导航点添加唯一key，符合React列表渲染规范。
• 优化isLoading的判断逻辑，在按钮上添加disabled属性防止加载时操作。

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