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

本文已参与「新人创作礼」活动，一起开启掘金创作之路。 前言 文字超出一般都是换行或者截断隐藏改成省略号，但是类似公告的文字提示必须完整的展示出来。这种一般会让文字滚动起来，以便用户看到完整的信息。本文

1.需求导向 1.1.需求导向 1.2.实现功能 1.可以底部自定义按钮的样式，文字 2.可以自定义内容 3.使用Esc键可以关闭模态框 4.使用shift可以自动聚焦关闭按钮，使用Enter实现关闭

组件讲究的是复用性，和可移植性。 可复用:就是要做到组件逻辑功能和业务逻辑功能互不影响也就是所谓的解藕。 可移植:就是要做到软件（组件）与系统无关，也就是没有外部依赖。 纯函数组件也称无状态组件在这里得到了很好的应用。 数据采用从父组件接收 props 的方式获取而不采用 st…

平时项目使用弹窗，用 npm 仓库的就可以。 或者antd design 的也不错。 我尝试用react hook 实现一个弹窗。 参数配置参考蚂蚁文档的部分。