如何在SweetAlert2弹窗中使用ReactJS的useState？

问题核心 #

你之前用ReactDOMServer.renderToString把React组件转成静态HTML传给SweetAlert2的html参数，这种方式会丢失React的状态管理和事件绑定逻辑——静态HTML不具备React的运行时环境，自然无法响应状态变化。下面给出两种可行的解决方法：

方法一：正确使用sweetalert2-react-content包 #

这个包的作用是让SweetAlert2能直接渲染React组件，完整保留其状态和交互能力，你之前可能未正确配置它。

步骤：

1. 确保安装依赖：

npm install sweetalert2 sweetalert2-react-content

2. 封装带状态的React组件：

import { useState } from 'react';

const InteractiveAlertContent = () => {
  const [count, setCount] = useState(0);

  return (
    <div style={{ padding: '1rem' }}>
      <p>当前点击次数：{count}</p>
      <button 
        onClick={() => setCount(prev => prev + 1)}
        style={{ padding: '0.5rem 1rem', cursor: 'pointer' }}
      >
        点击计数
      </button>
    </div>
  );
};

3. 使用包裹后的SweetAlert2实例渲染组件：

import Swal from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';

// 创建支持React内容的SweetAlert2实例
const MySwal = withReactContent(Swal);

// 调用弹窗
const showInteractiveAlert = () => {
  MySwal.fire({
    title: '带状态的交互式弹窗',
    html: <InteractiveAlertContent />, // 直接传入React元素，而非字符串
    showConfirmButton: false,
    showCloseButton: true
  });
};

关键说明：

• 绝对不要用renderToString转换组件，直接把React元素传给html参数即可，sweetalert2-react-content会自动处理React的挂载和运行时逻辑。

方法二：手动挂载React组件到SweetAlert2容器 #

如果第一种方法不生效，可以手动控制React组件的挂载和卸载，确保组件在SweetAlert2的容器中正常运行。

代码示例：

import Swal from 'sweetalert2';
import ReactDOM from 'react-dom/client';
import { useState } from 'react';

const InteractiveAlertContent = () => {
  const [inputValue, setInputValue] = useState('');

  return (
    <div>
      <input 
        type="text" 
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
        placeholder="输入内容..."
        style={{ padding: '0.5rem', marginBottom: '1rem' }}
      />
      <p>你输入的内容：{inputValue}</p>
    </div>
  );
};

const showManualMountAlert = async () => {
  // 打开弹窗，预留挂载容器
  await Swal.fire({
    title: '手动挂载的交互式弹窗',
    html: '<div id="react-alert-mount-point"></div>',
    showCloseButton: true,
    // 弹窗关闭时卸载组件，避免内存泄漏
    willClose: () => {
      const mountPoint = document.getElementById('react-alert-mount-point');
      if (mountPoint) {
        ReactDOM.unmountComponentAtNode(mountPoint);
      }
    }
  });

  // 弹窗打开后，挂载React组件
  const mountPoint = document.getElementById('react-alert-mount-point');
  if (mountPoint) {
    const root = ReactDOM.createRoot(mountPoint);
    root.render(<InteractiveAlertContent />);
  }
};

关键注意事项：

• 必须在弹窗打开后再挂载组件，此时容器才会出现在DOM中；
• 弹窗关闭时一定要执行卸载操作，防止React组件残留导致内存泄漏；
• React 18版本需使用createRoot，React 17及以下用ReactDOM.render。

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