如何通过JavaScript追加React JSX组件到HTML实现全局Toast

直接调用ReactDOM.render（或React18的root.render）挂载到已被业务应用占用的#root节点时，React会替换目标节点下的所有现存渲染内容，这就是原有页面内容被清空的根本原因。

要实现全局静态调用的Toast，核心思路是为Toast创建独立于业务应用根节点的专属DOM容器，和原有应用的React渲染树完全隔离，挂载/卸载Toast都不会影响现有页面内容。

具体实现逻辑 #

• 编写全局Toast工具方法，每次调用时动态创建一个新的DOM节点追加到body下
• 将Toast组件渲染到这个独立容器中，不占用业务用的#root节点
• Toast关闭时自动卸载组件、移除动态创建的容器节点，避免冗余DOM

代码示例 #

React 18+ 版本 #

import { createRoot } from 'react-dom/client';
import OvToast from '你的OvToast组件路径';

const showToast = (...args) => {
  // 兼容Swal风格的多参数传参
  let options = {};
  if (typeof args[0] === 'string') {
    const [title, content, type] = args;
    options = { title, content, type };
  } else {
    options = args[0] || {};
  }

  // 创建独立容器，和业务根节点隔离
  const container = document.createElement('div');
  document.body.appendChild(container);
  const toastRoot = createRoot(container);

  // 定义关闭逻辑：卸载组件 + 移除临时容器
  const handleClose = () => {
    options.onClose?.();
    toastRoot.unmount();
    document.body.removeChild(container);
  };

  // 渲染Toast组件
  toastRoot.render(
    <OvToast
      open
      autoHideDuration={options.duration || 6000}
      title={options.title}
      content={options.content}
      type={options.type}
      handleClose={handleClose}
      {...options}
    />
  );

  // 返回手动关闭方法，方便业务侧主动控制
  return { close: handleClose };
};

export default {
  fire: showToast
};

React 17 及更早版本 #

import ReactDOM from 'react-dom';
import OvToast from '你的OvToast组件路径';

const showToast = (...args) => {
  let options = {};
  if (typeof args[0] === 'string') {
    const [title, content, type] = args;
    options = { title, content, type };
  } else {
    options = args[0] || {};
  }

  const container = document.createElement('div');
  document.body.appendChild(container);

  const handleClose = () => {
    options.onClose?.();
    ReactDOM.unmountComponentAtNode(container);
    document.body.removeChild(container);
  };

  ReactDOM.render(
    <OvToast
      open
      autoHideDuration={options.duration || 6000}
      title={options.title}
      content={options.content}
      type={options.type}
      handleClose={handleClose}
      {...options}
    />,
    container
  );

  return { close: handleClose };
};

export default { fire: showToast };

调用方式 #

和SweetAlert用法完全一致，在需要触发提示的地方引入工具即可：

import OvToast from './ovToast';

// 字符串参数风格
OvToast.fire('Good job!', 'You clicked the button!', 'success');

// 对象配置风格
OvToast.fire({
  title: '提示',
  content: '操作已完成',
  type: 'success',
  duration: 3000
});

可选优化 #

• 如果需要支持多个Toast堆叠展示，现有逻辑天然支持，每次调用都会生成独立容器，不会互相覆盖
• 如果需要同一时间仅展示一条Toast，可以在工具内维护单例标记，新Toast触发时先关闭已存在的实例即可
• 可以在项目入口文件将OvToast挂载到window对象上，省掉每次引入的步骤

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