javascript 使用react.js启动屏幕

eit6fx6z 于 2023-06-20 发布在 Java

关注(0)|答案(1)|浏览(108)

我试图在第一次登录我的项目时使用React.js创建一个启动画面，我的代码工作正常，但是当我在页面之间切换时，启动画面再次工作。当第一个项目打开时，只有启动画面应该工作，然后它不应该工作。下面是我的代码片段App.js：

import Navbar from "./Navbar/Navbar.js";
import React, { useEffect, useState } from 'react';
import SplashScreen from './SplashScreen';
import './App.css';
import Home from "./Menu/Home.js";
import Footer from "./Footer/Footer.js";
import About from "./Menu/About.js";
import Contact from "./Menu/Contact/Contact.js";

function App() {
  const [showSplash, setShowSplash] = useState(true);
 useEffect(() => {
    const timer = setTimeout(() => {
      setShowSplash(false);
    }, 2000);

    return () => clearTimeout(timer);
  }, []);
  return (
    <div className="App">
      {showSplash ? (
        <SplashScreen />
      ) : (
        <div className="app__body">
          <Navbar />
          <Home />
          <About />
          <Contact />
          <Footer />
        </div>
      )}
    </div>
  );
}

export default App;`

SplashScreen.js:

import React from 'react';
import './SplashScreen.css';

const SplashScreen = () => {
  return (
    <div className="splash-screen">
      <h1>Welcome to My App</h1>
    </div>
  );
};

export default SplashScreen;

JavaScript

来源：https://stackoverflow.com/questions/76496570/splash-screen-with-react-js

1条答案

按热度按时间

sqxo8psd1#

发生这种行为的原因可能是，每次在页面之间导航时，整个App组件都可能被重新呈现，这会将showSplash状态重置回true。这将使启动画面再次出现。
您需要将启动画面的状态存储在某个位置，以便在组件重新呈现之间保持该状态。您可以使用localStorage来跟踪启动屏幕是否已显示。
下面是一个例子：

import Navbar from "./Navbar/Navbar.js";
import React, { useEffect, useState } from 'react';
import SplashScreen from './SplashScreen';
import './App.css';
import Home from "./Menu/Home.js";
import Footer from "./Footer/Footer.js";
import About from "./Menu/About.js";
import Contact from "./Menu/Contact/Contact.js";

function App() {
  const [showSplash, setShowSplash] = useState(localStorage.getItem('splashShown') !== 'true');
  
  useEffect(() => {
    if (showSplash) {
      const timer = setTimeout(() => {
        setShowSplash(false);
        localStorage.setItem('splashShown', 'true');
      }, 2000);
  
      return () => clearTimeout(timer);
    }
  }, [showSplash]);

  return (
    <div className="App">
      {showSplash ? (
        <SplashScreen />
      ) : (
        <div className="app__body">
          <Navbar />
          <Home />
          <About />
          <Contact />
          <Footer />
        </div>
      )}
    </div>
  );
}

export default App;

在这个更新的版本中，当应用加载时，它会检查localStorage在“splashShow”键下的值。如果它找到一个值'true'，它知道启动画面已经显示，所以它将showSplash设置为false。否则，它默认为true，并显示启动屏幕。
当显示启动画面时，它会设置一个计时器，在2秒后隐藏启动画面。同时，它将值'true'存储在localStorage中的'splashShown'键下。
使用这种方法，即使App组件被重新呈现，启动屏幕也只会在用户第一次访问应用时显示（或者如果他们清除了本地存储）。
请记住，使用localStorage可能会影响用户的隐私，因此请确保您遵守任何相关法规和用户期望。

赞(0）回复(0）举报 2023-06-20

我来回答

javascript 使用react.js启动屏幕

1条答案

相关问题

热门标签

最新问答