Cum adaug un site ecran de încărcare în ReactJS?

Question 1

Sunt foarte nou pentru ReactJs, JS și, practic, toate de dezvoltare web. Am încercarea de a crea o singură pagină de portofoliu site-ul, folosind ReactJS și a vrut să încercați unele tehnici mai avansate, cum ar fi folosind cârlige. Am vrut să creez un efect simplu în cazul în care o animație joacă o dată (atunci când un utilizator se conectează la site-ul meu), atunci ele sunt aduse la site-ul principal. Toate resursele pe care am găsit on-line se referă la ecrane de încărcare în timp ce preluarea datelor de la un API. Aici este codul pentru ecran de încărcare:

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

}

Eu sunt, folosind un foarte simplu de a reacționa pachet numit tipic care oferă o animație frumos de cuvinte fiind scris pe ecran ca o mașină de scris, apoi se șterse, apoi următorul bit de text se arată etc.. asta numai bucle odată. Am folosit useState și useEffect cârlige cu un cronometru pentru a setLoading la fals în 18 ani, care este atunci când animația se oprește. După cum puteți vedea am face animație numai dacă încărcarea este adevărat, folosind operatorul ternar, apoi o dată de încărcare devine setată la false atunci null se afișează. Mea app.js se pare ca acest lucru:

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;

(Scuze pentru îngrozitor JSX). Problema am este că ambele navbar și ecran de încărcare cu sarcini în același timp. Sunt sigur cum de a ascunde toate celelalte componente până când animația este terminat. Tot ce încerc este muuult prea complicat si chiar nu pare foarte eficient, la toate. Apreciez orice ajutor va multumesc!!!

Question 2

Motivul pentru care sunt atât arată, în același timp, pentru că în app.js. Aveți atât <Loading /> component și <Nav /> componentă a fi prestate, în același timp.

Există două soluții poti sa te duci pentru

Puteți stilul de încărcare componentă a lua ecran complet și să acopere totul. Acest lucru poate fi realizat prin acordarea de încărcare ecran un act de identitate. Spune, loading-screen de exemplu și de a face următoarele în css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

DAR asigurați-vă că după încărcare, timpul trece pentru a ascunde ecranul de încărcare în caz contrar, se va ține bloca vederea.

Puteți pune încărcare logică în app.js în loc de a fi în interiorul Încărcare componentă. Puteți să-l avea render Încărcarea componente atâta timp cât starea de încărcare este adevărat, în caz contrar se încarcă restul de app (navbar, etc..). Puteți face ceva de genul:

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

Motivul pentru care sunt atât arată, în același timp, pentru că în app.js. Aveți atât <Loading /> component și <Nav /> componentă a fi prestate, în același timp.

Există două soluții poti sa te duci pentru

Puteți stilul de încărcare componentă a lua ecran complet și să acopere totul. Acest lucru poate fi realizat prin acordarea de încărcare ecran un act de identitate. Spune, loading-screen de exemplu și de a face următoarele în css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

DAR asigurați-vă că după încărcare, timpul trece pentru a ascunde ecranul de încărcare în caz contrar, se va ține bloca vederea.

Puteți pune încărcare logică în app.js în loc de a fi în interiorul Încărcare componentă. Puteți să-l avea render Încărcarea componente atâta timp cât starea de încărcare este adevărat, în caz contrar se încarcă restul de app (navbar, etc..). Puteți face ceva de genul:

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

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

De ce nu putem folosi leneș încărcare de rezervă ca o încărcare de lucru. Nu nu da acelasi rezultat?

Cum adaug un site ecran de încărcare în ReactJS?

Problema

Cel mai bun răspuns

În alte limbi

Această pagină este în alte limbi

Popular în această categorie

Întrebări frecvente în această categorie