我正在尝试在我的React项目中构建一个轮播组件 - 实际上，我试图利用一个用纯JS编写的现有轮播组件，使用Refs在React中使其工作，而不是直接修改DOM。当我尝试通过将序列中的第一张幻灯片标记为当前幻灯片（具有className current-slide）来初始化轮播时，我遇到了问题。我将此操作放在了一个useEffect钩子中，其中{topMovies}是依赖项。{topMovies}是一个通过prop传递给轮播组件的对象数组，因此当topMovies发生变化（即加载）时，useEffect应该运行。这个操作是有效的 - 加载后，轮播中的第一张幻灯片被赋予了classname 'current-slide'。

然而，第二段代码（nextSlide和moveToSlide）是选择下一张幻灯片的函数的开始。将track Ref（即所有幻灯片的容器）传递给函数，以便可以选择具有className 'current-slide'的子元素，并删除其className。这也是有效的 - 但是在短暂的延迟（约1秒）后，className 'current-slide'重新出现。

const Carouselv2 = ({topMovies}) => {

    //Refs

    const trackRef = useRef();
    const nextBtnRef = useRef();
    const prevBtnRef = useRef();
    const navDotsRef = useRef();

    //Initialise carousel upon prop load

    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        if (topMovies && setIsLoading) {
            const slides = Array.from(trackRef.current.children);

            slides[0].classList.add('current-slide'); //Mark first slide as visible

            const slideWidth = slides[0].getBoundingClientRect().width;

            const setSlidePosition = (slide, index) => {
                slide.style.left = slideWidth * index + 'px';
            }

            slides.forEach(setSlidePosition); //Arrange slides alongside each other

            setIsLoading(false);
        }
    }, [topMovies]);

    //Button functionality

    const moveToSlide = (currentSlide, targetSlide) => {
        //trackRef.current.style.transform = 'translateX(-' + targetSlide.style.left + ')';
        currentSlide.classList.remove('current-slide');
        //targetSlide.classList.add('current-slide');
    }

    const updateDots = () => {

    }

    const responsiveBtns = () => {

    }

    const prevSlide = (e) => {

    }

    const nextSlide = (e) => {
        const currentSlide = trackRef.current.querySelector('.current-slide');
        const nextSlide = trackRef.current.children.nextElementSibling;

        moveToSlide(currentSlide, nextSlide);
    }

    return (
        <div className="carousel">
            <button className="carousel_button carousel_button--left" ref={prevBtnRef}><FontAwesomeIcon icon={faCircleLeft} size="xl" style={{ color: "white" }} /></button>
            <div className="carousel_track-container">
                <ul className="carousel_track" ref={trackRef}>
                    {topMovies && topMovies.map((movie) => (
                        <li className="carousel_slide">
                            <img src={movie.image} alt="" />
                            <h2>{movie.title}</h2>
                        </li>
                    ))}
                </ul>
            </div>
            <button onClick={(e) => nextSlide(e)}className="carousel_button carousel_button--right" ref={nextBtnRef}><FontAwesomeIcon icon={faCircleRight} size="xl" style={{ color: "white" }} /></button>
            <div className="carousel_nav" ref={navDotsRef}>
                <button className="carousel_indicator current-slide"></button>
                {topMovies && Array.apply(0, Array(topMovies.length)).map(() => {
                    return <button className="carousel_indicator"></button>
                })}
            </div>
        </div>
     );
}

我最初的想法是由于某种原因，更改className导致useEffect触发，因此我添加了带有isLoading条件的if语句。但这并没有起作用，所以我不认为bug来自于useEffect钩子。

对此感到非常困惑，但这是我第一次使用Refs，所以完全有可能我错过了一些非常明显的东西。非常感谢您的帮助！