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

qq_530245192025-04-17 11:40

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