React JS 无限轮播

Question

我正在用 React JS 构建一个投资组合应用程序，我的其中一个页面是“关于我”页面。我偶然发现了一个 youtube 视频，该视频使用 vanilla JavaScript 构建了一个无限旋转木马，并且在我最初的测试中它起作用了。但是，当我离开我的 'About Me' 页面和 return 时，它会在我的关于我组件“stepNext”中出现“TypeError：无法读取属性 'style' of null” ; 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>
        </>
    )
}

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

Answer 1

我建议using useRef instead of document.querySelector

document.querySelector happens outside of that lifecycle, making what it returns unreliable, while refs happen within it. (Though doesn’t get reset because of a lifecycle event like a re-render.) This ensures the object returned by the ref is an accurate representation of the current state of the virtual DOM.

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

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

React JS 无限轮播

React JS Infinite Carousel

javascript

carousel

infinite-carousel

reactjs