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]);       // 当变量变化时弹出弹窗
}
相关推荐
鱼樱前端1 小时前
今天介绍下最新更新的Vite7
前端·vue.js
coder_pig2 小时前
跟🤡杰哥一起学Flutter (三十四、玩转Flutter手势✋)
前端·flutter·harmonyos
万少2 小时前
01-自然壁纸实战教程-免费开放啦
前端
独立开阀者_FwtCoder2 小时前
【Augment】 Augment技巧之 Rewrite Prompt(重写提示) 有神奇的魔法
前端·javascript·github
yuki_uix2 小时前
AI辅助网页设计:从图片到代码的实践探索
前端
我想说一句2 小时前
事件机制与委托:从冒泡捕获到高效编程的奇妙之旅
前端·javascript
陈随易2 小时前
MoonBit助力前端开发,加密&性能两不误,斐波那契测试提高3-4倍
前端·后端·程序员
小飞悟2 小时前
你以为 React 的事件很简单?错了,它暗藏玄机!
前端·javascript·面试
中微子2 小时前
JavaScript 事件机制:捕获、冒泡与事件委托详解
前端·javascript
Whoisshutiao3 小时前
网安-XSS-pikachu
前端·安全·网络安全