蚂蚁金服开源组件Ant Design Notification 源码解读（10）

2023-11-26 12:44:12

前言

Ant Design 是蚂蚁金服开源的前端 UI 组件库，提供了丰富的组件和工具，帮助开发者快速构建高质量的 web 应用。Notification 组件是 Ant Design 中的一个重要组件，它可以用于在页面中显示通知消息，如成功提示、错误提示、警告提示等。

removeNotification 函数

removeNotification 函数是 Notification 组件中一个重要的函数，它用于删除当前显示的通知消息。该函数的签名如下：

removeNotification(key: string): void;

其中，key 是要删除的通知消息的唯一标识。

实现原理

removeNotification 函数的实现原理并不复杂，它主要做了以下几件事情：

根据 key 从 Notification 组件的 state 中获取要删除的通知消息。
如果该通知消息存在，则从 Notification 组件的 state 中将其删除。
如果该通知消息存在并且有 onClose 回调函数，则执行该回调函数。

实现细节

removeNotification 函数的实现细节如下：

removeNotification(key) {
    const { notifications } = this.state;
    const notification = notifications.find(n => n.key === key);
    if (notification) {
      this.setState({
        notifications: notifications.filter(n => n.key !== key),
      });
      if (notification.onClose) {
        notification.onClose();
      }
    }
  }