ant design——Modal

最新推荐文章于 2024-09-12 18:02:38 发布

原创最新推荐文章于 2024-09-12 18:02:38 发布 · 3.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ant design Modal

React 专栏收录该内容

4 篇文章

订阅专栏

本文主要介绍了在使用Ant Design的Modal组件过程中的一些关键API和实践经验，包括如何在Modal关闭时卸载组件，以及如何利用iframe在Modal内实现页面跳转。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

用ant design中的Modal有一段时间了，就我使用的一些API进行简单总结blablablabla…

Modal关闭时卸载组件

<Modal
title={null}         //模态框的标题
className={this.state.modalClass}   //采用自定义类名，这样重写模态框样式的时候不至于影响其他模态框样式
visible={this.state.visible}        //模态框是否出现，，通过visible为true/false状态来控制，
onOk={this.handleOk}                //点击确定回调
onCancel={this.handleCancel}        //点击遮罩层或右上角叉或取消按钮的回调
centered={true}       //模态框水平垂直居中
footer={null}      //不显示底部
closable={false}	//是否显示右上角的关闭按钮
maskClosable={false}  //点击蒙层是否允许关闭
destroyOnClose={true}   //关闭时销毁 Modal 里的子元素，因为我的Modal中放的是不同的组件，在关闭模态框时我希望其中的组件也卸载掉，但是子组件中定时器并没有关闭，所以设置了这个属性就可以。
>
</Modal>

如果要在Modal中添加一个网址所在页面，可以使用iframe进行跳转

 <iframe style={{
          width: '710px',
          height: '450px',
}} src='https://www.baidu.com'
frameBorder='0'/>