如何在非React组件的普通JS函数中渲染Snackbar等React元素

可以在React上下文之外渲染React元素，React官方提供了DOM渲染API专门支持这类全局组件的调用需求，正好适配你要在fetcher工具函数中调用Snackbar组件的场景。

1. 新增独立DOM容器 #

在项目入口HTML（通常是index.html）的body标签中新增一个专属容器，用来挂载全局Snackbar：

<body>
  <!-- 原有项目根容器，比如<div id="root"></div> -->
  <div id="global-snackbar-root"></div>
</body>

2. 封装全局调用函数 #

根据你使用的React版本，封装独立的showSnackbar工具函数，直接通过React渲染API挂载组件：

React 18+ 版本写法 #

import { createRoot } from 'react-dom/client';
// 导入你项目中已经封装好的Snackbar组件
import Snackbar from '@/components/Snackbar';

let snackbarRootInstance = null;
// 单例初始化渲染根节点
const getSnackbarRoot = () => {
  if (!snackbarRootInstance) {
    const container = document.getElementById('global-snackbar-root');
    snackbarRootInstance = createRoot(container);
  }
  return snackbarRootInstance;
};

export const showSnackbar = (message, type = 'error', duration = 3000) => {
  const root = getSnackbarRoot();
  root.render(
    <Snackbar
      message={message}
      type={type}
      autoHideDuration={duration}
      onClose={() => root.unmount()}
    />
  );
};

React 17 及更早版本写法 #

import ReactDOM from 'react-dom';
import Snackbar from '@/components/Snackbar';

const SNACKBAR_ROOT_ID = 'global-snackbar-root';

export const showSnackbar = (message, type = 'error', duration = 3000) => {
  let container = document.getElementById(SNACKBAR_ROOT_ID);
  // 不存在容器时自动创建
  if (!container) {
    container = document.createElement('div');
    container.id = SNACKBAR_ROOT_ID;
    document.body.appendChild(container);
  }

  ReactDOM.render(
    <Snackbar
      message={message}
      type={type}
      autoHideDuration={duration}
      onClose={() => ReactDOM.unmountComponentAtNode(container)}
    />,
    container
  );
};

3. 在fetcher中调用 #

将封装好的showSnackbar导入到fetcher文件中，替换你代码中// SHOW SNACKBAR HERE的注释位置即可，示例：

import { showSnackbar } from './snackbarUtils';

export const fetcher = (signal, method, route, content = null) => {
  // 原有代码逻辑
  return fetch(`${API_URL}${route}`, options)
    .then(res => {
      if (res.status === 401 && isLoggedIn()) {
        showSnackbar('登录凭证已失效，请重新登录');
        return Promise.reject("INVALID_TOKEN");
      }
      if (res.status === 500) {
        showSnackbar('服务器异常，请稍后重试');
        return Promise.reject("UNKNOWN_ERROR");
      }
      // 其余状态的提示逻辑同理补全即可
      // 原有剩余代码
    })
  // 原有catch逻辑
};

• 如果你的Snackbar依赖React Context（比如主题、国际化配置），需要在渲染时把对应的Provider包裹在Snackbar外层，保证组件能正常读取上下文配置。
• 你之前用HOC不生效是正常的：HOC是针对React组件的封装逻辑，而fetcher是脱离React组件调用链路的普通JS函数，HOC无法在这类场景下拿到React上下文触发渲染。

内容的提问来源于stack exchange，提问作者Lucas Guilleminot