Notification源码分析，快来学习React开发的精髓！

前端

2023-10-04 15:55:59

Notification，即通知提醒框，常常于以下情况出现：

较为复杂的通知内容
带有交互的通知，给出用户下一步的行动点
系统主动推送

Ant Design的Notification组件拥有丰富的API，本文将对其实现原理进行剖析。

Notification组件API概述

Notification的API具有组件的特点，它不仅提供基本属性，还具有交互事件。

基本属性

title：通知的标题
description：通知的内容
type：通知的类型，包括“success”，“info”，“warning”，“error”四种类型
duration：通知的显示时长，单位为毫秒
placement：通知的显示位置，包括“topLeft”，“topRight”，“bottomLeft”，“bottomRight”四种位置
getContainer：自定义通知的容器元素
closeIcon：自定义关闭按钮的图标

交互事件

onClose：通知关闭时触发的事件
onClick：通知被点击时触发的事件

Notification组件内部结构分析

Notification组件的内部结构主要由两个部分组成：

NotificationBase：通知组件的基础部分，负责通知的显示、隐藏和定位
NotificationContent：通知组件的内容部分，负责通知的标题、和关闭按钮的显示

Notification组件的结构清晰，易于理解，这也是Ant Design组件一贯的设计风格。

如何使用Notification组件

使用Notification组件非常简单，只需要引入Ant Design库，然后按照API文档进行使用即可。

import { Notification } from 'antd';

const openNotification = () => {
  Notification.open({
    title: 'Notification Title',
    description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
    type: 'success',
    duration: 3000,
    placement: 'topLeft',
  });
};

openNotification();