मैं कैसे जोड़ें एक वेबसाइट लोड हो रहा है स्क्रीन में ReactJS?

Question 1

मैं सच में कर रहा हूँ के लिए नए ReactJs, जे एस और मूल रूप से सभी के वेब विकास. मैं कोशिश कर रहा बनाने के लिए एक एकल पृष्ठ पोर्टफोलियो वेबसाइट का उपयोग कर ReactJS और कोशिश करना चाहता था कुछ और अधिक उन्नत तकनीकों जैसे हुक का उपयोग कर. मैं चाहता था बनाने के लिए एक सरल प्रभाव है, जहां एक एनीमेशन नाटकों में एक बार (जब एक उपयोगकर्ता पहले लॉग में मेरी वेबसाइट के लिए), तो वे कर रहे हैं लाया करने के लिए मुख्य साइट है । सभी संसाधनों मैं ऑनलाइन पाया करने के लिए संबंधित लोड हो रहा है स्क्रीन whilst से डेटा दिलकश के लिए एक एपीआई. यहाँ है मेरे कोड के लिए लोड हो रहा है स्क्रीन:

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

}

मैं का उपयोग कर रहा हूँ एक बहुत ही सरल प्रतिक्रिया बुलाया पैकेज विशिष्ट देता है जो एक अच्छा एनीमेशन के शब्दों को टाइप किया जा रहा स्क्रीन पर एक टाइपराइटर की तरह, फिर हटा दिया जाता है, तो अगले बिट के पाठ दिखाया जाता है आदि.. यह केवल छोरों एक बार. मैं का उपयोग किया है useState और useEffect के साथ हुक करने के लिए एक टाइमर setLoading में गलत करने के लिए 18s जो है जब एनीमेशन बंद हो जाता है । के रूप में आप देख सकते हैं मैं रेंडर एनीमेशन केवल अगर लोड हो रहा है सच है, का उपयोग कर एक त्रिगुट ऑपरेटर, एक बार फिर लोड हो रहा है सेट करने के लिए false है तो बातिल हो जाता है प्रदर्शित किया जाता है । मेरे app.js इस तरह दिखता है:

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;

(क्षमा याचना के लिए भयानक JSX). इस मुद्दे को मैं कर रहा हूँ यह है कि दोनों नेवबार और लोड हो रहा है स्क्रीन भार एक ही समय पर. मैं अनिश्चित हूँ कैसे छिपाने के लिए मेरे सभी अन्य घटकों तक एनिमेशन समाप्त हो गया है. मैं सब कुछ कोशिश की है waaay करने के लिए जटिल है और वास्तव में नहीं लग रहे हो पर बहुत ही कुशल । मैं किसी भी मदद की सराहना करते हैं धन्यवाद!

Question 2

कारण क्यों वे दोनों कर रहे हैं दिखा रहा है पर एक ही समय में, क्योंकि app.js. आप दोनों को <Loading /> घटक और <Nav /> घटक प्रदान की जा रही एक ही समय में.

दो समाधान कर रहे हैं आप के लिए जा सकते हैं

आप शैली कर सकते हैं लोड हो रहा है घटक लेने के लिए पूर्ण स्क्रीन और सब कुछ कवर. यह हो सकता है देने के द्वारा किया जाता लोड हो रहा है स्क्रीन एक आईडी. कहते हैं, loading-screen उदाहरण के लिए और निम्नलिखित सीएसएस में:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

लेकिन सुनिश्चित करें कि आप के बाद लोड हो रहा है समय गुजरता है, को छिपाने के लिए लोड हो रहा है स्क्रीन अन्यथा, यह जाएगा रखने के विचार को अवरुद्ध.

आप डाल सकते हैं लोड हो रहा है तर्क में app.js के बजाय यह अंदर जा रहा है लोड हो रहा है घटक. आप कर सकते हैं इसे प्रस्तुत लोड घटक के रूप में लंबे समय के रूप में लोड हो रहा है राज्य में सच है अन्यथा बाकी लोड के अनुप्रयोग (नेवबार, आदि..) । आप क्या कर सकते हैं कुछ की तरह:
```
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

कारण क्यों वे दोनों कर रहे हैं दिखा रहा है पर एक ही समय में, क्योंकि app.js. आप दोनों को <Loading /> घटक और <Nav /> घटक प्रदान की जा रही एक ही समय में.

दो समाधान कर रहे हैं आप के लिए जा सकते हैं

आप शैली कर सकते हैं लोड हो रहा है घटक लेने के लिए पूर्ण स्क्रीन और सब कुछ कवर. यह हो सकता है देने के द्वारा किया जाता लोड हो रहा है स्क्रीन एक आईडी. कहते हैं, loading-screen उदाहरण के लिए और निम्नलिखित सीएसएस में:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

लेकिन सुनिश्चित करें कि आप के बाद लोड हो रहा है समय गुजरता है, को छिपाने के लिए लोड हो रहा है स्क्रीन अन्यथा, यह जाएगा रखने के विचार को अवरुद्ध.

आप डाल सकते हैं लोड हो रहा है तर्क में app.js के बजाय यह अंदर जा रहा है लोड हो रहा है घटक. आप कर सकते हैं इसे प्रस्तुत लोड घटक के रूप में लंबे समय के रूप में लोड हो रहा है राज्य में सच है अन्यथा बाकी लोड के अनुप्रयोग (नेवबार, आदि..) । आप क्या कर सकते हैं कुछ की तरह:
```
function App() {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setTimeout(() => {
            setLoading(false)
        }, 18000);
    }, []);

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

क्यों नहीं कर सकते हैं हम का उपयोग करें आलसी लोड हो रहा है fallback के रूप में एक लोड हो रहा बात है । करता है नहीं है एक ही परिणाम देने?

मैं कैसे जोड़ें एक वेबसाइट लोड हो रहा है स्क्रीन में ReactJS?

सवाल

सबसे अच्छा जवाब

अन्य भाषाओं में

यह पृष्ठ अन्य भाषाओं में है

इस श्रेणी में लोकप्रिय

लोकप्रिय सवाल इस श्रेणी में