当前位置：首页 > news >正文

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

news 来源：原创 2025/6/21 11:07:36

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

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

否则会报错：

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

单纯的将message放至useEffect中调用，会报错：

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

最终方法：

// 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]);       // 当变量变化时弹出弹窗
}