为 antd 应用默认包裹 App 组件

[Wxh16144]

概括

Umi 框架默认使用 antd 提供的 <App /> 组件包裹一层，以方便开发者直接使用 App.useApp` hook；

动机

接到社区大量反馈，静态调用 message 方法，无法消费 Design Token 问题，故我们在 antd@5.2 提供了 <App /> 组件，期望开发者在应用最外层套一次， 然后通过 App.useApp 得到 message，modal，notification 方法；

但仍有部分开发者忘记使用 <App /> 包裹应用。导致 useApp 获得的方法仍不生效。

该讨论期望通过框架默认帮助开发者注入 Provider。

最终我们希望开发者使用const { message } = useApp(); 代替 import message from ‘antd’;, 我们也更推荐使用这种方式。

详细

通过 umijs plugin 实现默认注入, 参考: https://github.com/umijs/umi/blob/03983e574b641be82c90928cdcc5bd484e3c82c7/packages/plugins/src/antd.ts

缺点

暂无

优点

开发者可以直接在业务中直接使用 App.useApp 得到静态 message，modal，notification 方法；

[afc163]

得有个开关。

[Wxh16144]

我在尝试给 umi 提交 pr，计划是 5.x 版本默认开启 App 包裹。

[afc163]

用户如果手动包 App，是否会有冲突。

[Wxh16144]

好，我回头测试一下，因为我印象中 antd 那边处理了 App 嵌套 App 的逻辑

[xiaohuoni]

为什么 antd 的 ConfigProvider 不支持包含 App ？

[kaoding]

建议ConfigProvider 做一个开关支持 ，不要让umi使用插件支持（这个支持脱离了组件完备性）。

[Wxh16144]

umi v4.0.58 antd plugin 已支持~

[fantasyLzzy]

升级了umi之后,使用:
const {message} = App.useApp();
const hide = message.loading('正在添加...');

为什么会找不到方法呢,有兄弟能解惑么?
TypeError: message.loading is not a function

[fantasyLzzy]

@Wxh16144

[Wxh16144]

我试了一下功能是正常的，默认是不添加的。你需要配置一下？你能给我提供更多信息吗

[fantasyLzzy]

我试了一下功能是正常的，默认是不添加的。你需要配置一下？你能给我提供更多信息吗

喔 那可能是配置的问题吧,这个需要配置开启么?没有看到相关的开启说明哎

[Wxh16144]

从你提供的截图无法排查问题，可以提供几个方法去排查一下：

1. umi 版本需要 4.0.58、antd 需要大于 5.1.0
2. 在 umi 中启用 antd plugin 启用文档
3. 在 .umirc.tx 中添加 antd.appConfig

[fantasyLzzy]

从你提供的截图无法排查问题，可以提供几个方法去排查一下：

1. umi 版本需要 4.0.58、antd 需要大于 5.1.0
2. 在 umi 中启用 antd plugin 启用文档
3. 在 .umirc.tx 中添加 antd.appConfig
   // config/config.ts
   export default {
   antd: {
   // antd valid for version 5.1.0 or higher, default: undefined
   appConfig: {}
   },
   };
   确实是配置没有开启的原因,Thank you for your patience~

[cp3hnu]

@Wxh16144 请问在全局方法中怎么使用 App.useApp()，比如网络请求的响应处理怎么使用 message.error("请求失败")

[Wxh16144]

sorry, 回复有些晚了，具体你可以移步看看这个 #41855

[cp3hnu]

非常感谢