Ant Design 的 Notification 通知为什么没显示出来？

彦杰🍀 提问于 2026-02-25 12:40:18 阅读 12

组件

我按照官网文档写了 notification 代码，但点击按钮后完全没反应，控制台也没报错，是不是哪里漏了？

我已经引入了 message 和 notification，也调用了 notification.success()，但就是看不到弹窗。

import { notification } from 'antd';

const showNotice = () => {
  notification.success({
    message: '操作成功',
    description: '数据已保存！',
  });
};

我来解答赞 1 收藏

反馈

2 条解答

Mr-之芳 Lv1

啊这个问题我遇到过！你的代码看起来没问题，但可能漏了个关键点。Ant Design的Notification需要在你的应用顶层包裹一个NotificationProvider组件。

可以试试这样改：

1. 在你的根组件里（比如App.js）加上这个：

import { NotificationProvider } from 'antd';



function App() {

  return (

    <NotificationProvider>

      {/* 其他组件 */}

    </NotificationProvider>

  );

}

2. 确保你的按钮确实绑定了点击事件，比如：

<button onClick={showNotice}>点击我</button>

我之前也踩过这个坑，搞了半天才发现是忘记加Provider了。Ant Design这个设计确实有点隐蔽，文档里写得不太明显。

如果加了Provider还是不行，可以检查下antd的版本是不是最新的，老版本可能会有兼容问题。

2026-03-06 14:06

宇文佳宁 Lv1

检查一下有没有在应用最外层包 App 组件里引入 ConfigProvider 并设置 getPopupContainer，或者更常见的是——你是不是用的是 Ant Design 5？如果是 v5，得先挂载 notification.useNotification 的 hook，而不是直接调 notification.success。

正确写法是这样：

import { notification } from 'antd';



export default function App() {

  const [api, contextHolder] = notification.useNotification();



  const showNotice = () => {

    api.success({

      message: '操作成功',

      description: '数据已保存！',

    });

  };



  return (

    <>

      {contextHolder}

      <button onClick={showNotice}>显示通知</button>

    </>

  );

}

2026-02-25 13:02