static-message.zh-CN

原先在 v4 中可以在非组件环境下使用这些静态方法，比如放在 axios 里面用 message.error 做一些报错的提示。

现在 V5 版本里，需要用 const { message } = App.useApp();

是不是意味着无法再像以前那样用了？

解决方案#

当然不是，参考下方 Demo，通过在独立文件中定义相应的实例变量，即可在非 React 环境下使用，并且仍然响应主题。

原理解析#

antd-style 在 ThemeProvider 中提供了一个 getStaticInstance 接口，用户可以从中获取集成后的实例。

该方法的实现原理也很简单，以 message 为例：

import { message } from 'antd';

const Provider = ({ getStaticInstance, children, theme }) => {
  // 1. 使用 useMessage 获取实例
  const [messageInstance, messageContextHolder] = message.useMessage(staticInstanceConfig?.message);

  useEffect(() => {
    // 3. 将实例用 getStaticInstance 抛出
    getStaticInstance?.({
      message: messageInstance,
    });
  }, []);

  return (
    <ConfigProvider theme={theme}>
      {/* 2. 插入 message 的上下文 */}
      {messageContextHolder}
      {children}
    </ConfigProvider>
  );
};

Modal 、message 等 antd 的静态方法不响应主题，如何解决？#

解决方案#

原理解析#