을 추가하려면 어떻게 해야 합니까 웹사이트 적재 화면에서 ReactJS?

Question 1

내가 정말 새로운 ReactJs,JS 기본적으로 모든 웹 개발. 내가 하려고 하나 만들어지는 포트폴리오 사용하는 웹사이트 ReactJS 및고 있었과 같은 고급 기술을 사용하 후크. 을 만들고 싶었 간단한 효과는 애니메이션을 재생하면(사용자가 처음에 로그를 나 웹 사이트),그들은 가져온의 주요 사이트입니다. 모든 자원을 발견했 온라인 관한 로드 스크린을 동시에서 데이터를 가져 오는 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>
    );

}

내가 사용하여 매우 간단한 반응이라는 패키지 일반적인을 제공하는 멋진 애니메이션의 단어 입력되는 화면에 다음과 같 타자기,그 후 삭제됩,그 다음 약간의 텍스트가 표시 등.이 루프 한다. 사 useState 및 useEffect 후크와 타이머 setLoading 거짓에서 18 세 때 애니메이션을 중지합니다. 당신이 볼 수 있듯이 나는 렌더 애니메이션을 만드는 사실을 사용하여,원자,다 얻을 로드 값을 false 로 설정하면 null 을 가져옵 표시됩니다. 나 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). 이 문제는 내가 하는 것은 모두 메뉴 바와 부를 동시에. 나는 어떻게 숨기는 모든 내 다른 구성 요소까지 애니메이션을 완성된다. 모든 것을 시도 깨끗하는 복잡하고 정말 보이게 매우 효율적이다. 내가 어떤 도움을 평가 감사합니다!

Question 2

그 이유를 모두 보여주는 동시기 때문에서 app.js. 당신이 <Loading /> 구성 요소 및 <Nav /> 구성 요소 렌더링에서 동일한 시간입니다.

두 가지 솔루션을 위해 갈 수 있다

할 수 있는 스타일을 로드하는 요소를 전체 화면 모든 것을 커버. 이 수행할 수 있습함으로써드 id. 말 loading-screen 예를 들어 다음 작업을 수행합에서 css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

그러나 확인한 후에 당신을 로드하는 시간을 숨기려면 그렇지 않으면,그것은 유지를 차단합니다.

를 넣을 수 있습니다 loading 로직 app.js 대신 그것을 안 선적 구성 요소입니다. 당신은 그것을 할 수 있습니 렌더링 로드하는 요소으로 선적 상태는 그렇지 않으면 true 로드 응용 프로그램의 나머지 부분(메뉴 바,등..). 당신이 할 수 있는 다음과 같습니다.

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 /> 구성 요소 렌더링에서 동일한 시간입니다.

두 가지 솔루션을 위해 갈 수 있다

할 수 있는 스타일을 로드하는 요소를 전체 화면 모든 것을 커버. 이 수행할 수 있습함으로써드 id. 말 loading-screen 예를 들어 다음 작업을 수행합에서 css:
```
#loading-screen {
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
}
```

그러나 확인한 후에 당신을 로드하는 시간을 숨기려면 그렇지 않으면,그것은 유지를 차단합니다.

를 넣을 수 있습니다 loading 로직 app.js 대신 그것을 안 선적 구성 요소입니다. 당신은 그것을 할 수 있습니 렌더링 로드하는 요소으로 선적 상태는 그렇지 않으면 true 로드 응용 프로그램의 나머지 부분(메뉴 바,등..). 당신이 할 수 있는 다음과 같습니다.

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

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

왜 우리가 사용하는 게을 로드하는 대체적으로 선적 것입니다. 가되지 않은 같은 결과는?

을 추가하려면 어떻게 해야 합니까 웹사이트 적재 화면에서 ReactJS?

질문

최고의 응답

다른 언어로

이 페이지는 다른 언어로되어 있습니다

이 카테고리에서 인기

인기 있는 질문에 이 카테고리