如何在 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>
    );

}

我正在使用一个名为 typical 的非常简单的反应包，它提供了一个很好的动画效果，就像打字机一样在屏幕上打字，然后被删除，然后显示下一段文本等等。这只循环一次。我使用带有计时器的 useState 和 useEffect 挂钩在动画停止的 18 秒内将 Loading 设置为 false。如您所见，我仅在 loading 为真时使用三元运算符渲染动画，然后一旦 loading 设置为 false，则显示 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 道歉）。我遇到的问题是导航栏和加载屏幕同时加载。在动画完成之前，我不确定如何隐藏所有其他组件。我尝试的每件事都非常复杂，而且看起来效率不高。感谢您的帮助，谢谢！

Answer 1

之所以同时出现，是因为在app.js。您同时呈现 <Loading /> 组件和 <Nav /> 组件。

您可以选择两种解决方案

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

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

但是请确保在加载时间过后隐藏加载屏幕，否则它会一直挡住视线。

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

function App() {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setTimeout(() => {
            setLoading(false)
        }, 18000);
    }, []);

    return (
        <div>
            {loading ? (<Loading />) :
                (
                    <main>
                        <Nav />
                    </main>
                )
            }
        </div>
    );
}

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

How do I add a website loading screen in ReactJS?

javascript

animation

reactjs

react-component

react-hooks