Reactjs'de bir web sitesi yükleme ekranını nasıl ekleyebilirim?

Question 1

ReactJs, JS ve temelde tüm web geliştirme için gerçekten yeniyim. ReactJS kullanarak tek sayfalık bir portföy web sitesi oluşturmaya çalışıyorum ve kanca kullanmak gibi daha gelişmiş teknikleri denemek istedim. Bir animasyonun bir kez oynatıldığı (bir kullanıcı web siteme ilk giriş yaptığında) basit bir efekt oluşturmak istedim, sonra ana siteye getirildiler. Çevrimiçi bulduğum tüm kaynaklar, bir apı'den veri alırken yükleme ekranlarıyla ilgilidir. İşte yükleme ekranı için kodum:

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

}

Typical adlı çok basit bir react paketi kullanıyorum, bu da ekranda daktilo gibi yazılan kelimelerin güzel bir animasyonunu veriyor, sonra siliniyor, sonra bir sonraki metin parçası gösteriliyor vb.. bu sadece bir kez döner. useState ve useEffect kancalarını, animasyonun durduğu 18 saniye içinde false değerine ayarlamak için bir zamanlayıcı ile kullandım. Gördüğünüz gibi animasyonu yalnızca yükleme doğruysa, üçlü bir işleç kullanarak oluşturuyorum, sonra yükleme false olarak ayarlandıktan sonra null görüntüleniyor. Benim uygulamam.js şuna benziyor:

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;

(Korkunç JSX için özür dilerim). Yaşadığım sorun, hem gezinme çubuğunun hem de yükleme ekranının aynı anda yüklenmesidir. Animasyon bitene kadar diğer tüm bileşenlerimi nasıl gizleyeceğimden emin değilim. Denediğim her şey karmaşıktır ve gerçekten çok verimli görünmüyor. Herhangi bir yardım için teşekkür ederim teşekkür ederim!

Question 2

Her ikisinin de aynı anda gösterilmesinin nedeni, çünkü app.js. Var hem <Loading /> bileşen ve <Nav /> bileşen aynı anda işleniyor.

Gidebileceğiniz iki çözüm var

Yükleme bileşenini tam ekranı alacak ve her şeyi kapsayacak şekilde stillendirebilirsiniz. Bu, yükleme ekranına bir kimlik vererek yapılabilir. Demek, loading-screen örneğin, css'de aşağıdakileri yapın:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

ANCAK yükleme ekranını gizlemek için yükleme süresi geçtikten sonra görünümü engellemeye devam edeceğinden emin olun.

Yükleme mantığını app.js yükleme bileşeninin içinde olmak yerine. Yükleme durumu doğru olduğu sürece Yükleme bileşenlerini oluşturmasını sağlayabilirsiniz, aksi takdirde uygulamanın geri kalanını (Gezinme çubuğu vb.) Yükleyebilirsiniz..). Şöyle bir şey yapabilirsin:

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

Her ikisinin de aynı anda gösterilmesinin nedeni, çünkü app.js. Var hem <Loading /> bileşen ve <Nav /> bileşen aynı anda işleniyor.

Gidebileceğiniz iki çözüm var

Yükleme bileşenini tam ekranı alacak ve her şeyi kapsayacak şekilde stillendirebilirsiniz. Bu, yükleme ekranına bir kimlik vererek yapılabilir. Demek, loading-screen örneğin, css'de aşağıdakileri yapın:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

ANCAK yükleme ekranını gizlemek için yükleme süresi geçtikten sonra görünümü engellemeye devam edeceğinden emin olun.

Yükleme mantığını app.js yükleme bileşeninin içinde olmak yerine. Yükleme durumu doğru olduğu sürece Yükleme bileşenlerini oluşturmasını sağlayabilirsiniz, aksi takdirde uygulamanın geri kalanını (Gezinme çubuğu vb.) Yükleyebilirsiniz..). Şöyle bir şey yapabilirsin:

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

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

Neden tembel yükleme geri dönüşünü yükleme işi olarak kullanamıyoruz? Yok aynı sonucu verir değil mi?

Reactjs'de bir web sitesi yükleme ekranını nasıl ekleyebilirim?

Soru

En iyi cevabı

Diğer dillerde

Bu sayfa diğer dillerde

Bu kategoride popüler

Popüler soruları bu kategoride