跳至主要內容
版本：v8

在 React 中使用覆蓋層元件

對於 Ionic React，您可以使用兩種技術來顯示覆蓋層元件，例如模態視窗、警示、動作表等。在本指南中，我們將介紹這兩種技術。

覆蓋層 Hook​

從 Ionic React 5.6 開始，我們引入了新的 React Hook，您可以使用它們來控制覆蓋層的顯示和關閉。這些 Hook 提供了一種以程式設計方式控制覆蓋層的方法，以及一種在 Ionic 頁面之外使用覆蓋層的方法，而無需狀態管理系統。

要使用其中一個覆蓋層 Hook，您需要從 @ionic/react 匯入您要使用的覆蓋層的 Hook。例如，如果我們要使用 Alert 覆蓋層，我們匯入 useIonAlert

import { useIonAlert } from '@ionic/react';

這些 Hook 會傳回一個陣列，其中陣列中的第一個項目是呈現 Hook 的方法，第二個項目是關閉 Hook 的方法

const [showAlert, hideAlert] = useIonAlert();
注意

覆蓋層通常會在使用者完成與它們的互動時自行關閉，因此您可能不需要使用關閉/隱藏方法。

若要顯示覆蓋層，您可以使用 present 方法，我們將其解構為名稱 showAlert。該方法會接收一組參數，這些參數會因每個覆蓋層而異，但一般而言，它們可以接收一組簡單的常見參數，也可以接收一個物件以指定其他選項。

showAlert('Hello!', [{ text: 'Ok' }]);

對於 useIonAlert，第一個參數是要顯示的訊息，第二個參數是一個 AlertButtons 陣列，用於自訂警示將顯示的按鈕。

或者，您可以傳遞一個 AlertOptions 組態物件，以提供其他參數，例如要新增至標記的 CSS 類別、警示的標頭，以及在關閉警示時呼叫的回呼函式。

showAlert({
  cssClass: 'my-css',
  header: 'Alert',
  message: 'Hello!',
  buttons: ['Cancel', { text: 'Ok', handler: (d) => console.log('ok pressed') }],
  onDidDismiss: (e) => console.log('alert dismiss'),
});

將其他自訂元件顯示為標記一部分的覆蓋層 Hook，例如模態視窗和快顯視窗，在初始化其 Hook 時會接收一些其他參數。第一個參數是您希望覆蓋層顯示的元件，第二個參數是您希望在建構元件時傳遞至元件的其他屬性的物件。

const [present, dismiss] = useIonModal(({ name }) => <div>Hello {name}.</div>, {
  name: 'Dave',
});

覆蓋層元件​

也可以使用 @ionic/react 中的元件來顯示覆蓋層。這些元件會接收一個 isOpen 屬性，您提供該屬性來控制覆蓋層目前是否正在顯示。當 isOpen 從 true 切換為 false（反之亦然）時，Ionic 會使用適當的動畫開啟/關閉覆蓋層。您也可以將任何其他組態選項作為屬性提供給覆蓋層

<IonAlert isOpen={showAlert} message="Hello!" buttons={[{ text: 'Ok' }]} onDidDismiss={() => setShowAlert(false)} />

在上述範例中，showAlert 布林值是從您的應用程式提供的狀態片段。

當關閉覆蓋層時，請務必連結到 onDidDismiss 回呼，並設定您的狀態變數以指示覆蓋層不再呈現。Ionic React 會尋找 isOpen 屬性的變更，以判斷是否應顯示覆蓋層。

對於顯示自訂元件的覆蓋層，例如模態視窗和快顯視窗，您可以將元件作為子項提供給覆蓋層元件。

<IonModal isOpen={showModal}>
  <div>Hello!</div>
</IonModal>
注意

覆蓋層元件仍然是一種有效的顯示覆蓋層方法，絕不是已過時的方法。請使用最適合您應用程式的方法。

Ionic 中覆蓋層的文件​

如需完整文件和查看 Hook 和元件方法的用法範例，請瀏覽 Ionic 中每個覆蓋層的文件頁面

目錄

編輯此頁面