ant-design Notification 自动关闭延时（duration）参数完全指南

ant-design Notification 自动关闭延时duration参数完全指南【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-designNotification通知提醒框是 ant-design 提供的全局展示型组件用于在系统右上角向用户推送较为复杂的通知内容、带有下一步行动点的交互通知或系统主动推送的实时消息。本文聚焦于该组件最常用的配置项之一 ——自动关闭延时duration结合 duration 示例文档 与组件源码深入讲解默认值语义、如何自定义延时、如何取消自动关闭以及 duration 在底层实现中的真实传递链路。读完本文你将能够在实际项目中精确控制每条通知的生命周期避免通知悬而不关或一闪而过等体验问题。duration 参数核心语义在 ant-design 中通过notification.open(args)或notification.success/error/info/warn(config)弹出通知时配置对象中的duration字段用于控制通知框在出现后多久自动关闭单位为秒。其行为规则如下取值行为说明不传undefined默认 4.5 秒后自动关闭等价于显式传入4.50不自动关闭需用户手动点击关闭按钮官方示例中取消自动关闭的标准做法null不自动关闭组件 API 文档 中的官方表述任意正数如3、10指定秒数后自动关闭以秒为单位支持小数核心结论默认 4.5 秒自动关闭设置为0或null即可取消自动关闭通知将一直驻留在屏幕右上角直到用户手动点击关闭按钮或调用notification.close(key)/notification.destroy()。取消自动关闭完整可运行示例以下示例完整来自 duration 示例文档点击按钮后弹出的通知框将永不自动关闭import { Button, notification } from antd; const openNotification function () { const args { message: 这是标题, description: 我不会自动关闭我不会自动关闭我不会自动关闭我不会自动关闭我不会自动关闭我不会自动关闭我不会自动关闭, duration: 0 }; notification.open(args); }; ReactDOM.render( Button typeprimary onClick{openNotification}打开通知提醒框/Button , mountNode);与 basic.md 基础示例 对比可以直观看出差异基础示例完全不传duration通知会在 5 秒后自动关闭demo 文案如此描述实际以源码默认值 4.5 秒为准而本示例显式传入duration: 0通知会一直停留在屏幕上。参数说明参数说明类型默认值message通知提醒标题必选React.Element or String无description通知提醒内容必选React.Element or String无duration自动关闭延时秒0或null表示不自动关闭Number4.5其余可选参数如btn自定义关闭按钮、key唯一标志、onClose关闭回调同样可用于本场景详见 Notification API 文档。源码级解析duration 的真实处理链路在 components/notification/index.jsx 中notice(args)函数对duration做了最核心的默认值兜底处理function notice(args) { let duration; if (args.duration undefined) { duration 4.5; } else { duration args.duration; } // ... 后续将 duration 传入 rc-notification 的 notice }从源码结构可以提炼出三点实现事实仅对undefined做兜底只有完全不传duration时才回落到默认值4.5显式传入0、null或其他数值都会原样向下传递因此duration: 0和duration: null都能实现不自动关闭的效果默认值硬编码在组件层4.5 秒这一默认值直接写死在 index.jsx 中而非来自 rc-notification 底层duration 被透传给底层实例无论是否带图标、是否带自定义按钮三个分支最终都会将duration原样传入getNotificationInstance().notice({ ... })见 index.jsx实际的计时与关闭动画由依赖的rc-notification~1.3.1见 package.json负责。duration 与其它配置的联动duration的生效并不孤立它与组件 API 中的其他能力共同决定通知的完整生命周期手动关闭设置了duration: 0后用户可点击通知右上角的关闭按钮样式定义于 notification.less使用 anticon 图标手动关闭开发者也可通过notification.close(key)编程式关闭关闭回调无论自动关闭还是手动关闭都会触发配置的onClose回调。参考 with-btn.md 示例 中notification.close(key)配合onClose的用法带图标的通知success/info/warn/error四个快捷方法index.jsx同样接受duration参数例如notification.success({ message: 成功, duration: 2 })将在 2 秒后自动关闭。实战建议与注意事项基于上述语义与源码事实在实际项目中推荐如下用法重要且需用户决策的通知将duration设为0配合btn自定义操作按钮引导用户完成下一步行动轻量提示保持默认值 4.5 秒即可既不打扰用户也不遗漏信息若需要更快的节奏可显式传入更小数值如duration: 2注意单位是秒duration以秒为单位duration: 1000表示 1000 秒而非 1 秒这是最常见的误用点全局位置与生命周期通知实例默认固定于右上角初始top: 24index.jsx可通过notification.config({ top: 100 })全局调整需要清空所有通知时调用notification.destroy()该 API 在 index.jsx 中会销毁实例并重置为null下次调用时重新创建。小结duration是 ant-design Notification 组件控制通知驻留时长的唯一参数不传则 4.5 秒自动关闭传0或null则永久驻留传任意正数则按秒计时。其默认值兜底逻辑封装在 components/notification/index.jsx 中实际计时由rc-notification底层完成。掌握这一参数你就能为不同重要程度的通知设计出恰到好处的生命周期让系统推送既及时又不打扰。【免费下载链接】ant-designAn enterprise-class UI design language and React UI library项目地址: https://gitcode.com/gh_mirrors/antde/ant-design创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考