Ako môžem pridať webové stránky nakládky obrazovky v ReactJS?

Question 1

Som naozaj nový ReactJs, JS, a v podstate všetky vývoj webových aplikácií. Som sa snažia vytvoriť jednu stránku portfólia webové stránky pomocou ReactJS a chceli vyskúšať niektoré náročnejšie techniky, napríklad pomocou háčikov. Chcel som vytvoriť jednoduchý efekt, kde animáciu hrá raz (keď používateľ prvýkrát prihlási na mojej webovej stránke), potom sú postavení na hlavnej stránke. Všetky zdroje, ktoré som našiel na internete sa týkajú nakládky obrazovky, zatiaľ čo načítaní údajov z API. Tu je môj kód pre nakládky 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>
    );

}

Ja používam veľmi jednoduché reagovať balík s názvom typického, ktoré dáva pekný animácie slová sú písané na obrazovke ako stroji, potom dostane odstránené, potom trochu text dostane zobrazené atď.. to len slučky raz. Ja som použila useState a useEffect háčiky s časovač na setLoading na hodnotu false v 18s, ktorý je, keď animácia sa zastaví. Ako môžete vidieť, som poskytol animácie, iba ak je zaťaženie, je pravda, pomocou ternární operátora, potom po načítaní dostane nastavená na false potom null dostane zobrazí. Môj app.js vyzerá 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;

(Ospravedlňujem sa, strašne JSX). Problém mám je, že obe navbar a nakládky obrazovky zaťaženie v rovnakom čase. Ja som si nie ste istí, ako skryť všetky moje ostatné komponenty, kým animácie je hotové. Všetko, čo sa snažím je waaay komplikované a naozaj nie je zdajú byť veľmi efektívne na všetky. Vážim si každú pomoc ďakujeme!

Question 2

Dôvod, prečo sú obaja ukazuje v rovnakom čase, pretože v app.js. Máte aj <Loading /> komponent a <Nav /> komponent je vykreslený v rovnakom čase.

Existujú dve riešenia, môžete ísť na

Môžete štýl nakladanie komponent prevziať celú obrazovku a pokryť všetko. Toto môže byť vykonané tým, že načítaní obrazovky id. Povedať, loading-screen napríklad, a potom postupujte takto v css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

ALE uistite sa, že ste po načítaní plynie čas, ak chcete skryť nakládky obrazovky inak, to budem mať blokovanie zobrazenia.

Môžete dať nakladanie logika v app.js namiesto toho, to, že vo vnútri Zaťaženia komponentov. Môžete mať to, že Naloženie súčastí, ako dlho, ako stav zaťaženia je pravda, inak zaťaženie zvyšok aplikácie (V navigačnom paneli, atď.). Môžete urobiť niečo ako:

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, prečo sú obaja ukazuje v rovnakom čase, pretože v app.js. Máte aj <Loading /> komponent a <Nav /> komponent je vykreslený v rovnakom čase.

Existujú dve riešenia, môžete ísť na

Môžete štýl nakladanie komponent prevziať celú obrazovku a pokryť všetko. Toto môže byť vykonané tým, že načítaní obrazovky id. Povedať, loading-screen napríklad, a potom postupujte takto v css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

ALE uistite sa, že ste po načítaní plynie čas, ak chcete skryť nakládky obrazovky inak, to budem mať blokovanie zobrazenia.

Môžete dať nakladanie logika v app.js namiesto toho, to, že vo vnútri Zaťaženia komponentov. Môžete mať to, že Naloženie súčastí, ako dlho, ako stav zaťaženia je pravda, inak zaťaženie zvyšok aplikácie (V navigačnom paneli, atď.). Môžete urobiť niečo ako:

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

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

Prečo by sme nemohli použiť lazy loading záložný ako nákladný vec. Robí, nie je dávajú rovnaký výsledok?

Ako môžem pridať webové stránky nakládky obrazovky v ReactJS?

Otázka

Najlepšiu odpoveď

V iných jazykoch

Táto stránka je v iných jazykoch

Populárne v tejto kategórii

Obľúbené otázky v tejto kategórii