搜索文档 /

在React中使用覆盖组件

对于离子betway东盟体育app反应,有两种技术可以用来显示覆盖组件,如模态,警报,动作表单等。在本指南中,我们将介绍这两种方法。

覆盖钩子

从ios_react 5betway东盟体育app.6开始,我们引入了新的React钩子,你可以用它来控制显示和取消覆盖。这些钩子提供了一种编程方式来控制覆盖,以及一种无需状态管理系统就可以在Ionic Page之外使用覆盖的方法。betway东盟体育app

要使用一个覆盖钩子,你需要导入你想要使用的覆盖钩子 @betway东盟体育appionic /反应 .例如,如果我们想使用警报覆盖,我们导入 useIonAlert


              进口
             
              
             useIonAlert
              
             
              
             
              “@betway东盟体育appionic /反应”
              
复制 复制

钩子返回一个数组,数组中的第一项是显示钩子的方法,第二项是关闭钩子的方法:


              常量
             
              
             showAlert
              
             hideAlert
              
             
              
             
              useIonAlert
              
              
              
复制 复制

当用户完成与覆盖的交互时,覆盖通常会自动消失,所以你可能不需要使用dismiss/hide方法。

要显示覆盖,您可以使用present方法,我们将其解构为名称 showAlert .该方法接受一组参数,这些参数随覆盖的不同而变化,但通常情况下,它们要么接受一组简单的公共参数,要么接受一个对象来指定额外的选项。


              showAlert
              
              “你好!”
              
             
              
              
             文本
              
             
              “好吧”
             
              
              
              
复制 复制

useIonAlert ,第一个参数是要显示的消息,第二个参数是一个数组 AlertButtons 要自定义警报将显示的按钮。

或者,你也可以传入一个AlertOptions配置对象来提供额外的参数,比如添加到标记中的CSS类,警告的头信息,以及警告解除时调用的回调:


              showAlert
              
              
             cssClass
              
             
              “我的css”
              
             
              
             
              “警告”
              
             消息
              
             
              “你好!”
              
             按钮
              
             
              
             
              “取消”
              
             
              
             文本
              
             
              “好吧”
              
             
              处理程序
              
             
              
              d
              
             
              =>
             
              控制台
              
              日志
              
              “好压”
              
             
              
              
             
              
              
             
              onDidDismiss
              
             
              
              e
              
             
              =>
             
              控制台
              
              日志
              
              “警报解散”
              
              
             
              
              
复制 复制

覆盖钩子显示额外的自定义组件作为其标记的一部分,例如 情态动词 弹窗 ,在初始化它们的钩子时接受一些额外的参数。第一个参数是你想要显示overlay的组件,第二个参数是你想在构造组件时传递给它的附加道具对象:


              常量
             
              
             现在
              
             驳回
              
             
              
             
              useIonModal
              
              
               
              的名字
               
              
             
              =>
             
                <
               div
               >
              你好
              
             的名字
              
              
                
               div
               >
              
             
              
             的名字
              
             
              “大卫”
             
              
              
              
复制 复制

覆盖组件

覆盖也可以通过使用组件显示 @betway东盟体育appionic /反应 .这些组件需要一个 isOpen 用于控制当前是否显示覆盖层的道具。当 isOpen 从真到假(反之亦然),爱奥尼亚将打开/关闭覆盖与适当的动画。betway东盟体育app你也可以提供任何其他额外的配置选项作为覆盖的道具:


                <
                IonAlert
              
               isOpen
                
                
               showAlert
                
              
               消息
                
                
               你好!
                
              
               按钮
                
                
                
                
               文本
                
               
                “好吧”
               
                
                
                
              
               onDidDismiss
                
                
                
                
               
                =>
               
                setShowAlert
                
                
                
                
              
               />
复制 复制

以上, showAlert 布尔值是应用程序提供的一段状态。

当覆盖被取消时,将其与 onDidDismiss 回调,并设置你的状态变量,以指示覆盖不再呈现。betway东盟体育app离子反应寻找变化 isOpen 来确定是否应该显示覆盖层。

用于显示自定义组件的覆盖,例如 情态动词 弹窗 ,你将该组件作为子组件提供给overlay组件:


                <
                IonModal
              
               isOpen
                
                
               showModal
                
               >
                <
               div
               >
              你好!
                
               div
               >
                
                IonModal
               >
复制 复制

Overlay组件仍然是一种有效的显示覆盖的方法,并不是一个废弃的方法。使用最适合您的应用程序的方法。

离子覆盖文档betway东盟体育app

要查看完整的文档以及钩子和组件方法的使用示例,请访问Ionic中每个覆盖层的文档页面:betway东盟体育app

以前的
进步的网络应用
下一个
存储
Baidu