《精通react/vue组件设计》之实现一个健壮的警告提示(Alert)组件

前言

本文介绍了如何设计一个带主题且可关闭的Alert组件，它是系统用户反馈的常用组件。作者强调，基于前端经验，应总结高效的开发方法，避免重复劳动。

组件分类

前端组件可分为通用型、布局型、导航型、数据录入型、数据展示型和反馈型等，组件系统设计可以参考这些分类。

正文

1. 组件设计思路

设计Alert组件前，需确认需求，包括样式控制、关闭按钮显示、提示内容输入、关闭按钮文本自定义、提示内容辅助文本、不同类型样式和关闭时自定义事件。需求分析后，绘制线框图，推荐使用PropTypes进行类型检测。

2. 基于react实现一个Alert组件

2.1. Alert组件框架设计

根据需求搭建组件框架，清晰后续业务逻辑。

2.2 实现style,closeText,message, description,type

采用classnames工具，简单实现多个属性。

2.3 实现closable和onClose

使用useState处理显示逻辑，通过visible控制Alert显示和隐藏，点击关闭时调用onClose。

2.4 健壮性支持

使用PropTypes工具增强组件健壮性，支持多种类型。

2.5 使用Alert组件

示例了如何使用Alert组件，并说明已发布到npm供安装。

最后

作者介绍了其他已实现的组件和提供了获取完整源码的方式。建议不熟悉react/vue组件设计原理的读者参考相关组件设计系列文章。