React 18/19 使用Ant Design全局弹窗message

react 18 及以上,拥有并发模式,不允许在渲染过程中直接触发副作用(如弹窗、网络请求等),应将其放至 useEffect 中,确保其在渲染完成后调用

javascript 复制代码
useEffect(() => {
    message.success('操作成功!');
  }, []); // 空依赖表示只在组件挂载时执行

否则会报错:

bash 复制代码
// 你在渲染中调用通知,它将被React 18并发模式打断。请改为触发生效。
You are calling notice in render which will break in
React 18 concurrent mode. Please trigger in effect instead.

单纯的将message放至useEffect中调用,会报错:

bash 复制代码
// 静态函数不能像动态主题那样消耗上下文。请使用"App"组件。
Warning: [antd: message] Static function can not consume 
context like dynamic theme. Please use 'App' component instead.

最终方法:

javascript 复制代码
// 1. 在 index.tsx 项目入口文件处使用App包裹
import {App as AntApp} from "antd";
......
function App() {
    return (
        <AntApp>
            <App />
        </AntApp>
    )
}
​
// 2. 在组件tsx文件中使用
import useApp from "antd/es/app/useApp";
......
function Component() {
    const {message} = useApp()
    useEffect(() => {
        // 自行添加条件,以控制弹窗出现时间
        message.info('弹窗内容')
    }, [oldMessage]);       // 当变量变化时弹出弹窗
}
相关推荐
一点一木12 分钟前
🚀 2025 年 07 月 GitHub 十大热门项目排行榜 🔥
前端·人工智能·github
脑袋大大的40 分钟前
uni-app x开发避坑指南:拯救被卡顿的UI线程!
开发语言·前端·javascript·vue.js·ui·uni-app·uts
ayas123191 小时前
CSS学习
前端·css·学习
人生在勤,不索何获-白大侠1 小时前
day25——HTML & CSS 前端开发
前端·css·html
Running_C1 小时前
Content-Type的几种类型
前端·面试
前端Hardy1 小时前
10 分钟搞定婚礼小程序?我用 DeepSeek 把同学的作业卷成了范本!
前端·javascript·微信小程序
Tminihu1 小时前
前端大文件上传的时候,采用切片上传的方式,如果断网了,应该如何处理
前端·javascript
颜酱1 小时前
理解vue3中的compiler-core
前端·javascript·vue.js
果粒chenl1 小时前
06-原型和原型链
前端·javascript·原型模式
谢尔登1 小时前
【JavaScript】手写 Object.prototype.toString()
前端·javascript·原型模式