如何在 ReactJS 中添加网站加载屏幕？

Question

我对 ReactJs、JS 以及基本上所有的 Web 开发都很陌生。我尝试使用 ReactJS 创建一个单页投资组合网站，并想尝试一些更高级的技术，例如使用钩子。我想创建一个简单的效果，动画播放一次（当用户首次登录我的网站时），然后将它们带到主站点。我在网上找到的所有资源都与从 API 获取数据时的加载屏幕有关。这是我的加载屏幕代码：

import Typical from 'react-typical';
import "./Loading.scss";
import {useState, useEffect} from 'react';

const Loading = function Loading() {
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    setLoading(true)
    setTimeout(() => {
      setLoading(false)
    },18000);

  }, [])

        return (
      <div>
        <h1 id="loading">
          { loading ?  <Typical oop={1} wrapper = 'p'
          steps={[
              "Hello",
              2000,
              "My name is Leonard.",
              3000,
              "I am an aspiring developer",
              3000,
              "Welcome to my website!",
              3000,
            ]} /> : null}
        </h1>
      </div>
    );

}

我正在使用一个非常简单的 react 包，称为典型，它可以像打字机一样在屏幕上输入文字，然后被删除，然后显示下一段文字等。这只会循环一次。我使用了 useState 和 useEffect 钩子和一个计时器，在 18 秒内将 setLoading 设置为 false，这是动画停止的时间。如您所见，我仅在加载为真时才渲染动画，使用三元运算符，然后一旦加载设置为假，则显示空值。我的 app.js 看起来像这样：

import Nav from './Components/Nav';
import "./App.scss";
import Loading from './Components/Loading';

function App() {
  return (
    <div>
      <Loading /> 
      <main>
      <Nav/>
      </main>

    </div>

    
  );
}

export default App;

（为糟糕的 JSX 道歉）。我遇到的问题是导航栏和加载屏幕同时加载。在动画完成之前，我不确定如何隐藏所有其他组件。我尝试的一切都太复杂了，而且似乎根本没有效率。感谢您的帮助，谢谢！

Answer 1

它们同时显示的原因是在app.js 中。您同时呈现了<Loading /> 组件和<Nav /> 组件。

您可以选择两种解决方案

1. 您可以设置加载组件的样式以获取全屏并覆盖所有内容。这可以通过给加载屏幕一个 id 来完成。比如说loading-screen，然后在css中执行以下操作：

   #loading-screen {
       position: absolute;
       width: 100%;
       height: 100%;
       background-color: white;
       display: flex;
       justify-content: center;
       align-items: center;
   }
   

但是请确保您在加载时间过后隐藏加载屏幕，否则，它将一直阻塞视图。

1. 您可以将加载逻辑放在 app.js 中，而不是放在 Loading 组件中。只要加载状态为真，您就可以让它渲染加载组件，否则加载应用程序的其余部分（导航栏等）。您可以执行以下操作：

   function App() {
       const [loading, setLoading] = useState(true);
       useEffect(() => {
           setTimeout(() => {
               setLoading(false)
           }, 18000);
       }, []);
   
       return (
           <div>
               {loading ? (<Loading />) :
                   (
                       <main>
                           <Nav />
                       </main>
                   )
               }
           </div>
       );
   }