Jak dodać ekran ładowania witryny w ReactJS?

Question 1

Jestem bardzo początkujący w ReactJS, JS i w zasadzie w całym przedsięwzięciu. Próbowałem stworzyć stronę internetową z portfolio na jednej stronie za pomocą ReactJS i chciałem spróbować bardziej zaawansowanych technik, takich jak używanie haków. Chciałem stworzyć prosty efekt, gdy animacja jest odtwarzana raz (gdy użytkownik po raz pierwszy wchodzi na moją stronę), a następnie są wyświetlane na stronie głównej. Wszystkie zasoby, które znalazłem w Internecie, dotyczą ekranów ładowania przy wyciąganiu danych z API. Oto mój kod do ekranu startowego:

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

}

Używam bardzo prosty pakiet react pod nazwą typical, Który daje przyjemną animację słów, wybranych na ekranie, jak na maszynie do pisania, a następnie jest usuwany, a następnie wyświetlany jest następujący fragment tekstu itp. To powtarza się tylko jeden raz. Użyłem haki useState i useEffect z zegarem, aby ustawić wartość false w 18 sekund, kiedy animacja zatrzymuje się. Jak widać, jestem визуализирую animacje tylko w przypadku, gdy ładowanie jest prawdziwy, za pomocą тернарный operator, a następnie, jak tylko ładowanie zostanie ustawiona na wartość false, wyświetlona zostanie wartość null. Mój app.js wygląda tak:

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;

(Przepraszam za okropny JSX). Problem, z którym spotykam, polega na tym, że i pasek nawigacji i ekran ładowania są ładowane jednocześnie. Nie jestem pewien, jak ukryć wszystkie moje inne składniki, aż animacja nie zostanie zakończona. Wszystko, co próbuję, to zbyt skomplikowane i rzeczywiście wydaje się być bardzo wydajny. Doceniam każdą pomoc, dziękuję!

Question 2

Powodem, dla którego obaj pokazują jednocześnie, bo w app.js. Masz oba <Loading /> komponent i <Nav /> składnik wizualizowane jednocześnie.

Są dwa rozwiązania, na które można przejść

Można skonfigurować komponent ładowania tak, aby zajmował cały ekran i obejmował wszystkie. Można to zrobić podając identyfikator na ekranie ładowania. Powiedz, loading-screen na przykład, wykonaj następujące kroki w css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

ALE upewnij się, że po upływie czasu ładowania ukrycia ekran ładowania, inaczej nadal będzie blokować wyświetlanie.

Możesz umieścić logikę pobrania w app.js zamiast tego, aby znajdować się wewnątrz startowej komponentu. Możesz go wyświetlić elementy pobierania, aż stan pobierania prawda, w przeciwnym razie pobierz pozostałą część aplikacji (pasek nawigacji itp.). Możesz zrobić coś takiego:

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

Powodem, dla którego obaj pokazują jednocześnie, bo w app.js. Masz oba <Loading /> komponent i <Nav /> składnik wizualizowane jednocześnie.

Są dwa rozwiązania, na które można przejść

Można skonfigurować komponent ładowania tak, aby zajmował cały ekran i obejmował wszystkie. Można to zrobić podając identyfikator na ekranie ładowania. Powiedz, loading-screen na przykład, wykonaj następujące kroki w css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

ALE upewnij się, że po upływie czasu ładowania ukrycia ekran ładowania, inaczej nadal będzie blokować wyświetlanie.

Możesz umieścić logikę pobrania w app.js zamiast tego, aby znajdować się wewnątrz startowej komponentu. Możesz go wyświetlić elementy pobierania, aż stan pobierania prawda, w przeciwnym razie pobierz pozostałą część aplikacji (pasek nawigacji itp.). Możesz zrobić coś takiego:

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

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

Dlaczego nie możemy użyć kopii wersji leniwej pobrania jako narzędzia do pobierania. Czy to nie daje tego samego efektu?

Jak dodać ekran ładowania witryny w ReactJS?

Pytanie

Najlepsza odpowiedź

W innych językach

Ta strona jest w innych językach

Popularne w tej kategorii

Najczęściej zadawane pytania w tej kategorii