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

前言

作者介绍了自己的组件设计系列文章，并提出了设计一个带有自定义主题和可关闭功能的Alert组件的需求。强调了作为前端工程师，应该根据经验总结出高效的开发方法，并按照通用型、布局型、导航型、数据录入型、数据展示型和反馈型等分类来设计组件系统。

正文

1. 组件设计思路

在设计Alert组件前，作者希望读者具备css3和js基础，并理解react/vue语法。组件需求包括样式控制、关闭按钮显示控制、自定义内容输入、关闭按钮文本自定义、辅助文本显示、内置不同类型样式以及自定义关闭事件。

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

2.1. Alert组件框架设计

作者首先展示了Alert组件的框架代码，使用了classnames和PropTypes进行类型检测。

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

对于组件的这些基础属性，作者通过对外暴露属性并在内部使用，来实现简单的功能。对于type属性，作者预制了几种样式，供用户配置。

2.3 实现closable和onClose

作者使用useState钩子来控制组件的显示与隐藏，并通过onClose方法提供自定义关闭功能。

2.4 健壮性支持

文章介绍了使用PropTypes来为组件属性提供类型检测，增强组件的健壮性。

2.5 使用Alert组件

提供了使用Alert组件的代码示例，并说明了如何通过npm安装并使用作者发布的组件库。

最后

作者回顾了之前实现的组件，并邀请读者加入技术群学习讨论。同时提供了关于组件设计原理的学习资源。

结对编程很可怕？掌握这几个技巧，让你的结对编程更易成功

了解更多

想要了解更多内容？

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

文章来源：

趣谈前端

扫码关注公众号