React-Select在Sweetalert2中无法正常加载问题求助

问题描述 #

尝试在SweetAlert2弹窗中使用React-Select组件时，弹窗弹出后控制台报错，下拉框无法正常显示。已尝试更换react-select版本、传递父组件ref，但问题仍未解决，期望实现React-Select下拉框在弹窗内正常渲染。

原代码 #

import Select from 'react-select'
import Swal, { SweetAlertResult } from 'sweetalert2';
import withReactContent from 'sweetalert2-react-content';

// Select Component
function MySelect ({ options }) {
    return <Select options={options} />
}

// Main Component
function Main() {    
    // Sweetalert initialization
    const MySwal = withReactContent(Swal);

    const openPopup = () => {
        MySwal.fire({
            title: 'Create Room',
            html: (
                <form>
                    <div className="mb-2">
                        <MySelect options={options} />
                    </div>
                </form>
            ),
        }).then((result) => { // handle result})
    }

    return <button onClick={openPopup}>Open SweetAlert</button>
}

解决方案 #

1. 补全未定义的options变量 #

原代码中<MySelect options={options} />的options未在Main组件中声明，这是核心报错原因之一。先定义下拉选项数据：

const options = [
  { value: 'room1', label: '会议室1' },
  { value: 'room2', label: '会议室2' },
  { value: 'room3', label: '会议室3' }
];

2. 修正SweetAlert2-react-content的使用方式 #

确保html属性传入的是React元素而非字符串，同时保证弹窗DOM动态生成时React-Select能正确挂载。修改后的完整代码：

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

// Select Component
function MySelect({ options }) {
    return <Select options={options} />;
}

// Main Component
function Main() {    
    // 定义下拉选项
    const options = [
        { value: 'room1', label: '会议室1' },
        { value: 'room2', label: '会议室2' },
        { value: 'room3', label: '会议室3' }
    ];

    // 初始化带React内容的SweetAlert
    const MySwal = withReactContent(Swal);

    const openPopup = () => {
        MySwal.fire({
            title: '创建会议室',
            html: <MySelect options={options} />,
            showCancelButton: true,
            confirmButtonText: '创建',
            cancelButtonText: '取消'
        }).then((result) => {
            if (result.isConfirmed) {
                // 处理确认逻辑
                console.log('会议室创建完成');
            }
        });
    };

    return <button onClick={openPopup}>打开弹窗</button>;
}

export default Main;

3. 解决样式冲突问题 #

SweetAlert2的默认样式可能覆盖React-Select的样式，导致下拉框不显示。可以给React-Select添加自定义类名并调整样式：

// 修改MySelect组件
function MySelect({ options }) {
    return <Select options={options} className="react-select-wrapper" />;
}

添加CSS：

.react-select-wrapper {
    width: 100%;
    margin: 10px 0;
}

4. 确保依赖版本兼容 #

使用最新稳定版依赖避免版本不兼容问题：

npm install sweetalert2@latest sweetalert2-react-content@latest react-select@latest

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