跳到主要内容
版本: v8

在 React 中使用叠加组件

对于 Ionic React，您可以使用两种技术来显示叠加组件，例如模态框、警报、操作表等。在本指南中，我们将介绍这两种技术。

叠加钩子​

从 Ionic React 5.6 开始，我们引入了新的 React 钩子，您可以使用它们来控制显示和关闭叠加。这些钩子提供了一种以编程方式控制叠加的方法，以及一种在没有状态管理系统的情况下在 Ionic 页面之外使用叠加的方法。

要使用叠加钩子之一，您需要从 @ionic/react 中导入您想要使用的叠加的钩子。例如，如果我们要使用 Alert 叠加，我们导入 useIonAlert

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

这些钩子返回一个数组，数组中的第一个元素是显示钩子的方法，第二个是关闭钩子的方法

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'),
});

在标记中显示其他自定义组件作为其一部分的叠加钩子，例如 模态框 和 弹出框，在初始化其钩子时接受两个额外的参数。第一个参数是您希望叠加显示的组件，第二个是您希望在构造组件时传递给组件的其他道具对象

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 中每个叠加的文档页面

内容

编辑此页面