1

我正在用 React JS 构建一个投资组合应用程序，我的一个页面是关于我的页面。我偶然发现了一个 youtube 视频，它使用 vanilla JavaScript 构建了一个无限轮播，并且在我最初的测试期间它有效。但是，当我离开我的“关于我”页面并返回时，它会在我的“关于我”组件“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>
        </>
    )
}

我选择这条路线的唯一原因是因为我一直无法找到一个半像样的无限轮播模块，具有易于定制的能力。尽管我更希望这样做，但我愿意接受建议和/或解决方案。非常感激！

4

1 回答 1

1

我建议使用useRef而不是document.querySelector

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

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

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

于 2021-02-09T07:00:45.450 回答