我試圖在加載時在頁面頂部制作加載欄。我怎樣才能做到這一點？我不知道如何做到這一點并在頁面加載時使其動態化。
uj5u.com熱心網友回復：
您可以這樣設定狀態：
const [isLoading, setIsLoading] = useState(true);
然后，您可以在 JSX 中默認顯示加載欄：
<span style={isLoading ? {display: 'block'} : {display: 'none'}}>
Loading...
</span>
之后，您可以使用useEffect和 方括號找出組件何時加載：
useEffect(() => {
setIsLoading(false);
}, []);
而已！加載組件后，將isLoading設定為false并且不再顯示加載欄。
uj5u.com熱心網友回復：
您可以設定一個LoadingState，它會顯示 LoadingScreen，直到獲取資料，一旦獲取，它將顯示相關資料。
function App() {
const [laoding, setLoading] = React.useState(true);
}
React.useEffect(() => {
fetchYourDataHere().
setLoading(false)
// This get called every time components Load
// Once we have our data we can set loading to false
},[depsHere])
if(loading) {
return <LoadingScreen />
}
return (<div> Your Regular Component </div>)
UseEffect是一個 Hook，可用于在每個組件加載時獲取資料。在此呼叫您的資料獲取函式，然后將 Loading State 設定為 False。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/420906.html
標籤：
上一篇：如何在點擊中心繪制SVG元素？
下一篇：根據焦點元素使用按鍵滾動頁面