reactjs - 延迟渲染反应

Question

我是 React 和 JS 的新手，遇到了一个问题。我想在用户在网站上停留 5 秒后显示一个模态。我正在尝试使用“setTimeout”函数来延迟我的模态渲染。我不确定为什么这不起作用。非常感谢任何和所有帮助。提前致谢！！

import styled from 'styled-components'
import Team from '../../images/Team.svg'

import { Button, Background, ModalWrapper, ModalImg, ModalContent, CloseModalButton } from './ModalElements'

const Modal = () => {

    const [showModal, setShowModal] = useState(false);

    return (
        <>
            {showModal ? (
                <Background>
                    <ModalWrapper showModal={showModal}>
                        <ModalImg src={Team} alt="team" />
                        <ModalContent>
                            <h1>Title</h1>
                            <p>Subtitle thing</p>
                            <button>Join Today</button>
                        </ModalContent>
                        <CloseModalButton aria-label='Close modal' onClick={() => setShowModal(prev => !prev)} />
                    </ModalWrapper>
                </Background>
            ) : null}
        </>
    )
}

class ShowModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            timePassed: false
        }
    }
    render() {
        setTimeout(() => { this.setState({ timePassed: true }) }, 5000);
        if (!this.state.timePassed) {
            return Modal
        }
    }
}

export default Modal

标签： reactjs

Answer 1

尝试这个：

import React from 'react'
import styled from 'styled-components'
import Team from '../../images/Team.svg'

import { Button, Background, ModalWrapper, ModalImg, ModalContent, CloseModalButton } from './ModalElements'

const Modal = () => {

    const [showModal, setShowModal] = useState(false);

    React.useEffect(() => {
        setTimeout(() => setShowModal(true), 5000);
    }, []);

    return (
        <>
            {showModal ? (
                <Background>
                    <ModalWrapper showModal={showModal}>
                        <ModalImg src={Team} alt="team" />
                        <ModalContent>
                            <h1>Title</h1>
                            <p>Subtitle thing</p>
                            <button>Join Today</button>
                        </ModalContent>
                        <CloseModalButton aria-label='Close modal' onClick={() => setShowModal(prev => !prev)} />
                    </ModalWrapper>
                </Background>
            ) : null}
        </>
    )
}

export default Modal

这个怎么运作？文档