メインコンテンツへスキップ
バージョン: v8

Reactでのオーバーレイコンポーネントの使用

Ionic Reactでは、モーダル、アラート、アクションシートなどのオーバーレイコンポーネントを表示するために使用できる2つの手法があります。このガイドでは、両方について説明します。

オーバーレイフック​

Ionic React 5.6から、オーバーレイの表示と非表示を制御するために使用できる新しいReactフックが導入されました。これらのフックは、オーバーレイをプログラムで制御する方法と、状態管理システムを必要とせずにIonicページの外でオーバーレイを使用する方法を提供します。

オーバーレイフックのいずれかを使用するには、@ionic/reactから使用したいオーバーレイのフックをインポートします。たとえば、アラートオーバーレイを使用する場合は、useIonAlertをインポートします。

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

フックは配列を返し、配列の最初の項目はフックを提示するメソッド、2番目の項目はフックを破棄するメソッドです。

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

オーバーレイは、ユーザーが操作を完了すると自動的に閉じることが多いため、破棄/非表示メソッドを使用する必要がない場合があります。

オーバーレイを表示するには、showAlertという名前でデストラクトされたpresentメソッドを使用します。このメソッドは、オーバーレイごとに異なる一連のパラメーターを受け取りますが、一般的に、簡単な一連の共通パラメーターまたは追加のオプションを指定するオブジェクトのいずれかを受け取ることができます。

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

useIonAlertの場合、最初のパラメーターは表示するメッセージで、2番目のパラメーターはアラートに表示されるボタンをカスタマイズするための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'),
});

モーダルやポップオーバーなど、マークアップの一部として追加のカスタムコンポーネントを表示するオーバーレイフックは、フックを初期化するときにいくつかの追加のパラメーターを受け取ります。最初のパラメーターはオーバーレイに表示するコンポーネントで、2番目のパラメーターはコンポーネントが構築されるときにコンポーネントに渡したい追加のプロップのオブジェクトです。

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のオーバーレイに関するドキュメント​

フックとコンポーネントの両方のアプローチの完全なドキュメントと使用例については、Ionicの各オーバーレイのドキュメントページを参照してください。

目次

このページを編集