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

Question

我对 ReactJs、JS 以及基本上所有 web 开发都很陌生。 我尝试使用 ReactJS 创建一个单页投资组合网站，并想尝试一些更高级的技术，例如使用钩子。 我想创建一个简单的效果，其中 animation 播放一次（当用户首次登录我的网站时），然后将它们带到主站点。 我在网上找到的所有资源都与加载屏幕有关，同时从 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>
    );

}

我正在使用一个非常简单的反应 package 称为典型，它提供了一个很好的 animation 的单词，就像打字机一样在屏幕上输入，然后被删除，然后显示下一位文本等等。这只循环一次。 我使用了 useState 和 useEffect 钩子和一个计时器，在 18 秒内将 setLoading 设置为 false，这是 animation 停止的时间。 如您所见，我仅在加载为真时使用三元运算符渲染 animation，然后一旦加载设置为假，则显示 null。 我的 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 道歉）。 我遇到的问题是导航栏和加载屏幕同时加载。 在 animation 完成之前，我不确定如何隐藏所有其他组件。 我尝试的一切都太复杂了，而且似乎根本没有效率。 感谢您的帮助，谢谢！

Answer 1

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

您可以使用两种解决方案 go

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

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

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

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

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