React JS 无限轮播

问题描述

我正在用 React JS 构建一个投资组合应用程序，其中一个页面是关于我的页面。我偶然发现了一个使用 vanilla JavaScript 构建无限轮播的 youtube 视频，并且在我最初的测试中它起作用了。但是，当我离开“关于我”页面并返回时，它会在我的“关于我”组件“stepNext; src/components/about-me/AboutMe. js:34"。

import React from "react";
import "./AboutMe.css"
import { Button,Fade,Grow,Typography } from '@material-ui/core'
import { ArrowBackIos,ArrowForwardios } from "@material-ui/icons";
import { Background,Adventures,Hobbies } from "./about-me-components/index";

export const AboutMe = () => {
    const slider = document.querySelector('.slider-about-me')
    const carousel = document.querySelector('.carousel-about-me')

    let direction = 1

    const stepPrevIoUs = () => {
        if (direction === 1) {
            slider.appendChild(slider.firstElementChild)
        }
        direction = -1
        console.log("PrevIoUs",direction)
        carousel.style.justifyContent = 'flex-end'
        slider.style.transform = 'translate(33%)'
    }

    const stepNext = () => {
        if (direction === -1) {
            slider.prepend(slider.lastElementChild)
        }
        direction = 1
        console.log("Next",direction)
        carousel.style.justifyContent = 'flex-start'
        slider.style.transform = 'translate(-33%)'
    }

    const sliderAppend = () => {
        if (direction === 1) { 
            slider.appendChild(slider.firstElementChild)
        } else if (direction === -1) { 
            slider.prepend(slider.lastElementChild)
        }
        slider.style.transition = 'none'
        slider.style.transform = 'translate(0)'
        setTimeout(() => {slider.style.transition = 'all 0.5s'})
    }

    return (
        <>
            <Fade
                in={true}
                timeout={1500}
            >
                <div
                    id='about-me-container'
                >
                    <div className="controls">
                        <div
                            className='arrow-span-about-me arrow-left-about-me'
                        >
                            <Button
                                className='button-about-me arrow-about-me'
                                variant='contained'
                                onClick={stepPrevIoUs}
                            >
                                <ArrowBackIos 
                                    className="arrow-back-about-me"
                                />
                            </Button>

                        </div>

                        <div
                            className='arrow-span-about-me arrow-right-about-me'
                        >
                            <Button
                                className='button-about-me arrow-about-me'
                                variant='contained'
                                onClick={stepNext}
                            >
                                <ArrowForwardios 
                                    className="arrow-forward-about-me"
                                />
                            </Button>
                        </div>
                    </div>

                <div
                    id="about-me-carousel-container"
                >
                    <div
                        className='carousel-about-me'
                    >
                        <div
                            className='slider-about-me'
                            ontransitionend={sliderAppend}
                        >
                            <section className='text-white'><Background /></section>
                            <section className='text-white'><Adventures /></section>
                            <section className='text-white'><Hobbies /></section>
                        </div>
                        
                    </div>
                </div>
                </div>

            </Fade>
        </>
    )
}

我选择这条路线的唯一原因是我还没有找到一个具有简单定制能力的半体面的无限轮播模块。尽管我更希望它起作用，但我愿意接受建议和/或解决方案。非常感谢！

解决方法

我建议using useRef instead of document.querySelector

document.querySelector 发生在该生命周期之外，使得它返回的内容不可靠，而 refs 发生在其中。 （虽然不会因为像重新渲染这样的生命周期事件而被重置。）这确保了 ref 返回的对象是虚拟 DOM 当前状态的准确表示。

我认为这就是当您离开和返回关于页面时遇到上述错误的原因。

这是一个例子： https://codesandbox.io/s/objective-fast-vhc27?file=/src/modalAndButton.jsx:531-648