Как добавить экран загрузки веб-сайта в ReactJS?

Question 1

Я действительно новичок в ReactJS, JS и в основном во всей веб-разработке. Я пытался создать веб-сайт с портфолио на одной странице с помощью 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 под названием typical, Который дает приятную анимацию слов, набираемых на экране, как на пишущей машинке, затем удаляется, затем отображается следующий фрагмент текста и т. Д. Это повторяется только один раз. Я использовал крючки useState и useEffect с таймером, чтобы установить значение false в 18 секунд, когда анимация останавливается. Как вы можете видеть, я визуализирую анимацию только в том случае, если загрузка истинна, используя тернарный оператор, затем, как только загрузка будет установлена в значение 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). Проблема, с которой я сталкиваюсь, заключается в том, что и панель навигации, и экран загрузки загружаются одновременно. Я не уверен, как скрыть все мои другие компоненты, пока анимация не будет завершена. Все, что я пытаюсь, слишком сложно и на самом деле кажется не очень эффективным. Я ценю любую помощь, спасибо!

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?

Вопрос

Лучший ответ

На других языках

Эта страница на других языках

Популярное в этой категории

Популярные вопросы в этой категории