我對 ReactJs、JS 和基本上所有的 Web 開發都很陌生。我嘗試使用 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>
);
}
我正在使用一個非常簡單的 react 包，稱為典型，它提供了一個很好的影片，可以像打字機一樣在螢屏上輸入文字，然后被洗掉，然后顯示下一個文本位等等。這只回圈一次。我已經使用 useState 和 useEffect 鉤子和計時器在 18 秒內將加載設定為 false，即影片停止的時間。如您所見，我僅在加載為真時才渲染影片，使用三元運算子，然后一旦加載設定為 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 道歉）。我遇到的問題是導航欄和加載螢屏同時加載。在影片完成之前，我不確定如何隱藏所有其他組件。我嘗試的一切都太復雜了，而且似乎根本沒有效率。我感謝任何幫助謝謝！
uj5u.com熱心網友回復：
它們同時顯示的原因是因為在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; }
但是請確保在加載時間過去后隱藏加載螢屏，否則它會一直阻塞視圖。
您可以將加載邏輯
app.js放在 Loading 組件中，而不是放在 Loading 組件中。只要加載狀態為真，您就可以讓它呈現加載組件，否則加載應用程式的其余部分（導航欄等）。您可以執行以下操作：function App() { const [loading, setLoading] = useState(true); useEffect(() => { setTimeout(() => { setLoading(false) }, 18000); }, []); return ( <div> {loading ? (<Loading />) : ( <main> <Nav /> </main> ) } </div> ); }
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/364856.html
標籤：javascript 反应 动画片 反应钩子 反应组件
上一篇：如何在gvim編輯器中獲取行號？