如何在ReactJS中显示启动画面

Question

我有两个Splash.jsx的代码和一个Homepage.jsx的代码。我只想在Homepage没有使用时显示启动画面，但是我不知道如何将启动画面与Homepage集成并设置计时器，以便在不使用Homepage时显示启动画面。希望能帮我展示如何在Homepage没有使用时显示启动画面。

import React from 'react';

import Card from '../Card/Card'
import img2 from '../../Assets/AutoLoan.png'
import img3 from '../../Assets/KYC.png'
import img4 from '../../Assets/VIsa.png'
import './Homepage.css'


import {
  Swiper,
  SwiperSlide
}
from 'swiper/react';
import 'swiper/css';
import { Navigation } from 'swiper';
import 'swiper/css/navigation';
import 'swiper/css/pagination';
import 'swiper/css/scrollbar';
import { Link } from 'react-router-dom';

 const Homepage= () => {
   return (
     <div>
    
     <div className="background">
       
         <div className="welcome__heading">
                <h1>Welcome!!</h1>
              </div>
              <div className= "customer__support">
           <h2>We are here for customer service.</h2>
            </div >
            <div className="swiper_container">
               <Swiper
                modules={[Navigation]}
                navigation
              spaceBetween={10}
              slidesPerView={3}
              onSwiper={(swiper) => console.log(swiper)}
                onSlideChange={() => console.log('slide change')}
                loop={true}
              >
           <SwiperSlide>
             <Link to="AutoLoan">
               <Card imgsrc={img2} alt="AutoLoan" title="Auto Loan" />
             </Link>
           </SwiperSlide>
           <SwiperSlide>
             <Link to="KYC">
               <Card imgsrc={img3} alt="KYC" title="KYC Form" />
             </Link>
           </SwiperSlide>
           <SwiperSlide>
             <Link to="Debit">
               <Card imgsrc={img4} alt="Visa" title="Visa Debit Card" />
             </Link>
           </SwiperSlide>
            </Swiper>
            </div>
            <div ClassName="button">
              
                <Link to = "Location">
                <button className = "btn1">
                  <i className = "fa fa-map"></i>
              </button>
              </Link>
              <Link to = "Calculator">
              
              <button className = "btn2">
               <i className = "fa fa-calculator"></i>
              </button>
         </Link>
         </div>
       </div>
       </div>
       
          );
          
}

export default Homepage

Splash.jsx

import React from 'react';
import './Splash.css'
import img2 from '../../Assets/Header.png'
import img8 from '../../Assets/hand.svg'




const Splash = () => {
    
    return (
        <div>
            <div className="bg2">
            <div className="header__body">
            <div className="header__left">
                <div className="header__left__image">
                    <img src = {img2} alt="Header"/>
                </div>
                <h1 >Laxmi Bank</h1>
               </div>
            <div className="header__right">
            <h1 >23℃/11:00AM</h1>
                    </div> 
                     
        </div>
                
            </div>
            <div className="splash">
                <h1>TAP HERE</h1>
            
            <div className= "blink">
                <img src = {img8} alt = "taphand" />
                   
             </div>   
        </div>      
        </div>
    );
};

export default Splash;

在不使用首页 2 秒后，应该出现启动画面；一旦我们点击启动画面，首页就会再次出现，一旦它处于空闲状态，启动画面就会出现，反之亦然。我不知道如何设置定时器并控制这个组件。因此，如果有人能帮帮我，那就太好了。

- shutu

Answer 1

• 需要创建一个空闲计时器，以便在Homepage用户不活动时触发。

• 当setTimeout触发回调时，将挂载Splash。

• 一旦Splash被挂载，点击“TAP HERE”链接标签会重定向回主页。

Homepage - (路径 = "/home")

import React,{ useEffect } from "react";
import { useNavigate } from "react-router-dom";

const Homepage= () => {
  let navigate = useNavigate();

  useEffect(() => {
    //Idle timer

    let timerId;

    const resetTimer = () => {
      clearTimeout(timerId);
      timerId = setTimeout(() => {
        navigate("/splash");
      }, 30 * 1000); //30 sec idle time
    };

    document.addEventListener("keydown", resetTimer);
    document.addEventListener("mousemove", resetTimer);
    return () => {
      clearTimeout(timerId);
      document.removeEventListener("keydown", resetTimer);
      document.removeEventListener("mousemove", resetTimer);
    };
  }, []);
}

Splash - (path = "/splash")

const Splash = () => {
  return <div>
    ...
    <Link to='/home'>TAP HERE</Link>
  </div>
}

- Shan

Answer 2

您可以使用react-idle-timer包。这里有一个可行的解决方案在这里

- S N