資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究ReactJS 中的 Suspense
在本文中，我們將學習如何在元件延遲載入時顯示載入程式。
當元件進行延遲載入時，需要顯示一個回退內容來指示正在 DOM 中載入該元件。
語法
<Suspense>
示例
在該示例中，我們將構建一個路由應用程式，該應用程式延遲載入元件，並在元件延遲載入時顯示載入程式。
App.jsx
import React, { Suspense, lazy } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import Loader from './Loader.js';
const Contact = lazy(() => import('./Contact'));
const App = () => (
<Router>
<Suspense fallback={<Loader />}>
<Route exact path="/contact" component={Contact} />
<Route
path="/"
exact
render={() => (
<div>
<h1>TutorialsPoint</h1>
<a href="/contact">Contact Us</a>
</div>
)}
/>
</Suspense>
</Router>
);
export default App;Contact.js
import React from 'react';
const Contact = () => {
return (
<div>
<h1>Contact Us</h1>
<h4>You already know us</h4>
</div>
);
};
export default Contact;Loader.js
import React from 'react';
const Loader = () => {
return <div>Please wait...</div>;
};
export default Loader;在上述示例中，當元件正在延遲載入時，載入程式元件作為該元件的回退內容載入到 DOM 中。
輸出
這將產生以下結果。
更新於：2021 年 3 月 19 日
1 千次以上瀏覽
廣告