如何在SweetAlert2的HTML中渲染React组件？

你遇到的问题源于SweetAlert的html属性不支持直接传入React组件（JSX对象），直接传入会被转换为字符串[object Object]。以下是两种可行的解决方法：

方法一：挂载组件到弹窗容器（适合有交互/状态的组件） #

通过预留占位DOM元素，在弹窗打开后将React组件挂载到该元素上，同时在弹窗关闭时卸载组件避免内存泄漏：

Swal.fire({
  title: "车辆报告",
  html: '<div id="car-report-container"></div>', // 占位容器
  confirmButtonText: "检查",
  preConfirm: () => {
    // 从组件中收集表单数据并发起请求
    const formData = {
      // 示例：获取组件内输入框的值
      licensePlate: document.getElementById('license-plate').value
    };
    return fetch('/api/check-car', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(formData)
    });
  },
  didOpen: () => {
    // 弹窗打开后挂载组件
    ReactDOM.render(<CarReport />, document.getElementById('car-report-container'));
  },
  willClose: () => {
    // 弹窗关闭时卸载组件
    ReactDOM.unmountComponentAtNode(document.getElementById('car-report-container'));
  }
});

如果使用React 18，替换ReactDOM.render为createRoot：

didOpen: () => {
  const container = document.getElementById('car-report-container');
  const root = ReactDOM.createRoot(container);
  root.render(<CarReport />);
},
willClose: () => {
  const container = document.getElementById('car-report-container');
  ReactDOM.createRoot(container).unmount();
}

方法二：将组件转为HTML字符串（仅适用于简单无状态组件） #

如果CarReport是纯静态或简单表单，可使用ReactDOMServer.renderToString将组件转为HTML字符串传入html属性：

import ReactDOMServer from 'react-dom/server';

Swal.fire({
  title: "车辆报告",
  html: ReactDOMServer.renderToString(<CarReport />),
  confirmButtonText: "检查",
  preConfirm: () => {
    // 通过原生DOM方法获取表单数据
    const formData = {
      model: document.querySelector('#car-model').value
    };
    // 发起API请求
  }
});

注意事项 #

• 方法一能保留React的状态管理和事件绑定，适合复杂交互组件；
• 方法二生成的是静态HTML，React事件会失效，仅适合简单场景；

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