ยังไงฉันเพิ่มเว็บไซต์ของการเรียกใช้หน้าจอใน ReactJS?

Question 1

ผมใหม่เพื่อ ReactJs,JS และเป็นทั้งหมดขอการพัฒนาเว็บ name. ฉันพยายามที่จะสร้างเดียวหน้าการชุดผลงานเว็บไซต์ของใช้ ReactJS และอยากจะลองอีกขั้นสูงเทคนิคการเช่นการใช้ hooks. ฉันอยากจะสร้างง่ายอย่างผลกระทบต่อการให้มีการเคลื่อนไหวเมื่อเล่นครั้งนึง(ตอนที่เป็นผู้ใช้ก่อนปูมบันทึกในกาต์บนเว็บไซต์ของฉัน)แล้วพวกเขาเป็นเอามาให้หลักระบบแล้ว ทั้งหมดทรัพยากรที่ฉันพบออนไลน์เกี่ยวข้องกับการโหลดน้าจอระหว่างที่กำลังทำการดึงข้อมูลข้อมูลจากรูปแบบ api. นี่คือรหัสสำหรับการโหลดจอภาพ:

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

}

ฉันใช้ง่ายมากๆตอบโต้ขอโทรมาเรื่องทั่วไปซึ่งทำให้เป็นแบบมีภาพเคลื่อนไหวขยับปากแต่เป็นคำพูดของการพิมพ์บนจอภาพเหมือนมีเครื่องพิมพ์ดีดแล้วถูกลบออกไป,แล้วพอหลังจากหน่อยข้อความจะแสดง etc..ตรงนี้เป็นแค่บางอย่างหนึ่งครั้ง ผมเคยใช้ค useState และ useEffect hooks กับตัวตั้งเวลาต้อง setLoading ต้องปลอมใน 18s ซึ่งเป็นตอนที่ให้มีการเคลื่อนไหวเมื่อหยุด อย่างที่คุณเห็นฉันจัดการพาผู้การเคลื่อนไหวอย่างเดียวเท่านั้นถ้ากำลังโหลดเป็นเรื่องจริงใช้ ternary โอเปอเรเตอร์ก็กำลังโหลดครั้งยิ่งตั้งค่าเพื่อปลอมงั้นโพรโทคอล aimcomment ถูกแสดง ของฉัน 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). ปัญหาของฉันกำลังจะมีคืนทั้งสอง navbar และกำลังโหลดจอภาพความในเวลาเดียวกัน ฉันไม่มั่นใจวิธีที่จะซ่อนทั้งหมดของฉันอีกส่วนประกอบจนกว่าจะให้มีการเคลื่อนไหวเมื่อเสร็จแล้ว ทุกอย่างที่ฉันพยายามเป็น waaay ต้องค่อนข้างซับซ้อนและจริงๆ doesnt ดูมีประสิทธิภาพทั้งหมด ฉันซาบซึ้งการช่วยเหลือใดๆขอบคุณ!

Question 2

เหตุผลว่าทำไมพวกเขาทั้งคู่แสดงในเวลาเดียวกันเพราะ app.js. คุณทั้งสองคน <Loading /> ส่วนประกอบและ <Nav /> ส่วนประกอบเป็นค่าการแสดงผลในเวลาเดียวกัน

มีสองวิธีแก้ปัญหาต่างๆที่คุณสามารถออกไป

คุณได้รูปแบบที่กำลังโหลดส่วนประกอบจะเต็มจอภาพและปกปิดทุกอย่าง มันสำเร็จได้โดยการให้คนกำลังโหลดหน้าจอมีบัตรประจำตัวครรับ พูดว่า loading-screen สำหรับตัวอย่างและทำตามใน css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

แต่ ทำให้แน่ใจว่าคุณหลังจากที่กำลังโหลดเวลาที่ผ่านไปเพื่อซ่อนการเรียกใช้หน้าจอไม่อย่างนั้นมันก็จะป้องกันไม่ให้จอดปิดทางมุมมอง

คุณสามารถวางกำลังโหลดตรรกะที่ app.js แทนที่จะเป็นของมันเป็นในการโหลดส่วนประกอบ. คุณสามารถมีมันจัดการพาคนกำลังโหลดส่วนประกอบนานเท่าที่ต้องการโหลดสถานะเป็นเรื่องจริงอย่างโหลดที่เหลือของแอพฯ(ค navbar เป็นต้..). คุณสามารถทำอะไรแบบ:
```
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 สำหรับตัวอย่างและทำตามใน css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

แต่ ทำให้แน่ใจว่าคุณหลังจากที่กำลังโหลดเวลาที่ผ่านไปเพื่อซ่อนการเรียกใช้หน้าจอไม่อย่างนั้นมันก็จะป้องกันไม่ให้จอดปิดทางมุมมอง

คุณสามารถวางกำลังโหลดตรรกะที่ app.js แทนที่จะเป็นของมันเป็นในการโหลดส่วนประกอบ. คุณสามารถมีมันจัดการพาคนกำลังโหลดส่วนประกอบนานเท่าที่ต้องการโหลดสถานะเป็นเรื่องจริงอย่างโหลดที่เหลือของแอพฯ(ค navbar เป็นต้..). คุณสามารถทำอะไรแบบ:
```
function App() {
    const [loading, setLoading] = useState(true);
    useEffect(() => {
        setTimeout(() => {
            setLoading(false)
        }, 18000);
    }, []);

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

ทำไมเราไม่สามารถใช้คนขี้เกียจการโหลดสำหรับการใช้งานต่อเนื่องเป็นกำลังโหลดกอย่าง มันไม่ใช่ให้เหมือนผล?

ยังไงฉันเพิ่มเว็บไซต์ของการเรียกใช้หน้าจอใน ReactJS?

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่