我怎么添加一个网站载在ReactJS?

Question 1

我是真正的新ReactJs，JS和基本上所有的网络的发展。我试图建立一个单页的投资组合的网站使用ReactJS和想尝试一些更先进的技术，例如使用挂钩。我想创建一个简单的效果，其中一个画剧，一旦(当用户首次登录到我的网站)，然后他们被带到主网站上。所有的资源，我在网上找到的涉及加载屏幕的同时获取的数据。这里是我的代码，用于装载屏幕：

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>
    );

}

我使用的是一个非常简单的反应，包谓的典型的，这提供了一个很好的画字输入在屏幕上就像一个打字机，然后被删除，那么下一位文本获得所示等。这只是循环的一次。我已经使用的useState和useEffect挂钩与定时器setLoading false在18s这是动画时停止。正如你可以看到我呈现的画只有如果装载的是真的，使用一个三元的操作者，然后一旦装卸设置虚假然后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;

(抱歉可怕的代码). 这个问题我有的是，这两个航栏和装载在同一时间。我不知道如何隐藏我的所有其他部件直到动画完成。我的一切尝试是主要复杂的和真的似乎没有非常高效的。我感谢所有帮助，谢谢你！

Question 2

为什么他们都表示在同一时间，因为在 app.js. 你有两个 <Loading /> 组件和 <Nav /> 组件正呈现在同一时间。

有两种解决方法你可以去

你可以的风格装成分采取的全画面并涵盖一切。这可以通过给予视的一个标识。说的， 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>
    );
}

Youssef Negm · Answer 1 · 2021-11-24T00:53:42

为什么他们都表示在同一时间，因为在 app.js. 你有两个 <Loading /> 组件和 <Nav /> 组件正呈现在同一时间。

有两种解决方法你可以去

你可以的风格装成分采取的全画面并涵盖一切。这可以通过给予视的一个标识。说的， 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?

的问题

最好的答案

其他语言

此页面有其他语言版本

受欢迎的此类别

流行的问题，在这个类别