antd v5 useMessage 如何在request等纯js组件里使用？

Question

官方示例里会生成一个contextHolder，然后放在dom中才能使用message。如果我是在一些纯js文件（requestjs）里使用message那contextHolder该放在哪里呢？

Answer 1

比如 messageInstance.js：

import { createMessage } from 'antd';

const messageInstance = createMessage({});

export default messageInstance;

App.js ：

import React from 'react';
import { message } from 'antd';
import MessageContext from './messageContext';

const App = ({ children }) => {
  const [messageApi, contextHolder] = message.useMessage();

  return (
    <MessageContext.Provider value={messageApi}>
      {contextHolder}
      {children}
    </MessageContext.Provider>
  );
};

export default App;

其他文件：

import { useContext } from 'react';
import MessageContext from './messageContext';

const request = async () => {
  // ...
  const messageApi = useContext(MessageContext);

  // 在请求成功或失败时使用 messageApi
  messageApi.success('请求成功！');
  messageApi.error('请求失败！');
};