Jak přidat webové stránky načítání obrazovky v ReactJS?

Question 1

Jsem opravdu nový ReactJs, JS a v podstatě všechny webové rozvoj. Jsem se snaží vytvořit jednu stránku webové stránky portfolia pomocí ReactJS a chtěl vyzkoušet některé pokročilejší techniky, jako je použití háčků. Chtěl jsem vytvořit jednoduchý efekt, kde se animace přehraje jednou (když uživatel poprvé přihlásí na mých stránkách), pak budou uvedena na hlavní stránce. Všechny zdroje, které jsem našel na internetu, se týkají načítání obrazovky při načítání dat z API. Tady je můj kód na načítání obrazovky:

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

}

Používám velmi jednoduché reagovat balíček s názvem typické který dává pěkné animace slov zadávány pomocí klávesnice na obrazovce, jako psací stroj, pak dostane vymazány, pak další kousek textu, dostane je znázorněno atd.. to jen smyčky jednou. Použil jsem useState a useEffect háčky s časovačem setLoading na hodnotu false v 18 což je, když animace se zastaví. Jak můžete vidět, jsem render animace pouze v případě, zatížení je pravda, pomocí ternární operátor, pak jakmile se načítání dostane nastavena na hodnotu false, pak null se zobrazí. Můj app.js vypadá takto:

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;

(Omlouvám se za hrozný JSX). Problém mám, je, že oba navbar a načítání obrazovky zatížení ve stejnou dobu. Nejsem si jist, jak skrýt všechny mé další komponenty, dokud animace je hotová. Všechno, co jsem vyzkoušet, je waaay složité a opravdu se zdá velmi efektivní. Vážím si každé pomoci, děkujeme!

Question 2

Důvod, proč jsou obě ukazují na stejný čas, protože v app.js. Máte oba <Loading /> součásti a <Nav /> součástí je vykreslen ve stejnou dobu.

Existují dvě řešení, můžete jít na

Můžete styl zatížení součásti, aby se na celou obrazovku a všechno pokrýt. To může být provedeno tím, že na obrazovce načítání id. Řekněme, loading-screen pro příklad a proveďte následující css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

ALE ujistěte se, že jste po dobu načítání prochází skrýt obrazovce načítání, jinak to bude pořád blokovat pohled.

Můžete si dát zatížení logika v app.js místo uvnitř Zatížení součásti. Můžete to učinit Načítání složek tak dlouho, dokud zatížení státu, je pravda, jinak zatížení na zbytku aplikace (navigační lišty, atd..). Můžete udělat něco jako:

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

Důvod, proč jsou obě ukazují na stejný čas, protože v app.js. Máte oba <Loading /> součásti a <Nav /> součástí je vykreslen ve stejnou dobu.

Existují dvě řešení, můžete jít na

Můžete styl zatížení součásti, aby se na celou obrazovku a všechno pokrýt. To může být provedeno tím, že na obrazovce načítání id. Řekněme, loading-screen pro příklad a proveďte následující css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

ALE ujistěte se, že jste po dobu načítání prochází skrýt obrazovce načítání, jinak to bude pořád blokovat pohled.

Můžete si dát zatížení logika v app.js místo uvnitř Zatížení součásti. Můžete to učinit Načítání složek tak dlouho, dokud zatížení státu, je pravda, jinak zatížení na zbytku aplikace (navigační lišty, atd..). Můžete udělat něco jako:

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

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

Proč nemůžeme použít lazy loading fallback jako načítání věc. Nemusí dát stejný výsledek?

Jak přidat webové stránky načítání obrazovky v ReactJS?

Otázka

Nejlepší odpověď

V jiných jazycích

Tato stránka je v jiných jazycích

Populární v této kategorii

Oblíbené položky v této kategorii