本文是笔者写组件设计的第九篇文章, 今天带大家实现一个轻量级且可灵活配置组合的模态框(Modal)组件, 该组件在诸如Antd或者elementUI等第三方组件库中都会出现,主要用来提供系统的用户反馈. 通用型组件: 比如Button, Icon等. 布局型组件: 比如Grid…

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情 https://ant.design/components/modal-cn/ antd 的文档是相当不错

通过对Antd Modal的二次封装，简化Antd Modal的调用方式，减少Modal模版代码量，快速的使用弹窗组件

常规使用 实现效果 从上图可以看出，如果是正常使用，对话框的loading，显示隐藏我们需要自己去控制，而我们使用这个组件，其实更希望去注重对话框的逻辑，内容展示等，所以我们就可以对它进行二次封装，让

当然，一般来说，我们写的 Modal 不会像官网里的例子这么的简单，毕竟这么简单的话会更倾向于使用类似于 Modal.confirm 等 API 直接调用弹出就好了。我们可能会对 Modal 进行二次封装，里面写一些代码逻辑及可能是固定的譬如 title 直接写在组件内，然后把…

引入 forwardRef, useImperativeHandle 这两玩意儿，然后用到的是useRef去调用