umi 项目 全局message 控制台提示[antd: message] Static function can not consume

[desonyuan]

Steps to reproduce

无

What is expected?

无

What is actually happening?

无

Environment	Info
antd	5.4.2
React	18.0.2
System	win10
Browser	chrome

---

umi 项目 配置axios拦截器中使用了message，应该脱离的项目上下文环境，如何解决这个问题呢？
控制台提示[antd: message] Static function can not consume context like dynamic theme. Please use 'App' component instead.

[fat-rab]

我也遇到了这个问题 ，不知道有没有解决方法

[Wxh16144]

暂时有个方案，挂一个空节点，然后用模块儿去引入方法。后续我看看能不能提供一个 demo

[miss55]

可以通过自定义事件来解决全局message问题

[echoyl]

妙啊，重写所有message的方法，换一个引用就改完了

[miss55]

我把封装代码也贴上了，基本上跟message一模一样

[ZYyyh-cool]

可以提供下demo吗

[Mr-Glin]

谢谢，已经可以了。

在App.tsx中，增加如下方法

于是就可以在ts中直接导入使用了
import { message } from '@/shared/EscapeAntd';
message.success('成功消息');

[LiHongyao]

你的 antdMessage 哪里来的？

[minm2015]

按这种方式确实可以解决报错，可是如何全局设置message的关闭时间了呢，之前可以在app.tsx里面追加message.config({
duration: 10
})这种方式就可以设置

[Wxh16144]

如何全局设置message的关闭时间

antd 提供了 <App /> 组件，可以全局配置，如果你用了 umijs ，可以看看 umijs antd 的 plugin

[sadianliaoer]

@Mr-Glin 我也试过这样写，但是 得到是 一个 message 空对象

[xxi-arch]

+1

[bairubing-xenera]

我也是这个问题，看着这个错太难受了

[Wxh16144]

我用 vite 项目创建了一个 demo https://github.com/Wxh16144/antd-41855-demo 主要内容在 src/shared/EscapeAntd.tsx, 用一个全局变量保持 message 实例, 如果大家有更好的解决方案可以补充一下.

[XiaoXiaoWu98]

我试过并没有生效，依然报错，并且不会弹出消息， [email protected]

[loakliu]

有用的，参考官网的例子：https://ant-design.antgroup.com/components/app-cn 全局场景，我在next13.4 app route的工程中已经运行可以了

[nglkz]

有用，很清晰！

[XiaoXiaoWu98]

使用该方法立马使用页面跳转，会仍然不生效，只有做跳转延迟，使用这个方法才生效，页面变更，这个提示就会消失！

[big-tutu]

降了一下版本后没再报错，比如@5.2.1

[yycang]

还是这个最方便，眼不见心不烦

[WuJiY]

有解决方案了吗？

[lovewinders]

+1

[linxianxi]

可以试试文档里这样
https://ant.design/components/app-cn#%E5%85%A8%E5%B1%80%E5%9C%BA%E6%99%AFredux-%E5%9C%BA%E6%99%AF

[nianxi]

这样是可以的

1. 原app.tsx

import AntdWrapApp from "./message"
export function rootContainer(container: React.ReactElement) {
return (
<App>
<AntdWrapApp />
{container}
</App>
)
}

2. 新增message.tsx

import { App } from "antd"
import type { ModalStaticFunctions } from "antd/es/modal/confirm"
import type { MessageInstance } from "antd/lib/message/interface"
import type { NotificationInstance } from "antd/lib/notification/interface"

let message: MessageInstance
let notification: NotificationInstance
let modal: Omit<ModalStaticFunctions, "warn">

export default () => {
const fn = App.useApp()
message = fn.message
notification = fn.notification
modal = fn.modal
return null
}
export { message, notification, modal }

[guyuedashu]

export default () => {
const fn = App.useApp()
message = fn.message
notification = fn.notification
modal = fn.modal

const _modalWarning = fn.modal.confirm;
modal.confirm = (data) => {
_modalWarning(Object.assign({cancelText: '取消', okText: '确定'}, data));
}
return null
}
export { message, notification, modal }
只能这样写了

[Wxh16144]

modal组件不支持全局配置

看文档：https://ant.design/components/app-cn#api

[terwer]

这样有问题，暗黑模式还是显示浅色的。

[echoyl]

使用全局场景（redux 场景），modal.confirm 的国际化配置无法读取全局的，设置中文显示的还是英文，暗黑模式也还是浅色的。这个有方法吗？

[sanxin-lin]

这样就可以了

[joesdu]

不知在Ant Pro应该如何处理?

[YuShai]

import { App, message as antdMessage, } from 'antd';
import type { MessageInstance } from 'antd/es/message/interface';

let message: MessageInstance = antdMessage;

function MessageGlobal() {
const staticFunction = App.useApp();
message = staticFunction.message;
return null;
};

export { message, };
export default MessageGlobal;