React-Select 在 Sweetalert2 中不起作用

Question

我尝试在 Sweetalert2 中使用 React-Select 组件，但是当 sweetalert 在屏幕上弹出时，它会在控制台上抛出错误。附图包含错误描述

这是我的代码

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. 更改了react-select的版本
2. 尝试从父组件传递引用

期望：在 Sweetalert 中看到 React-Select 下拉列表

结果：空 Sweetalert，没有反应选择下拉菜单

Answer 1

在

.then((result) => { // handle result})

处，括号被注释，并且传递给

options

的变量

MySelect

不存在。以下是代码的更新：

主组件.jsx

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

const options = [
  { value: 'small', label: 'Small' },
  { value: 'medium', label: 'Medium' },
  { value: 'large', label: 'Large' },
];

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

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

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

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

export { MainComponent };

演示

Answer 2

你的问题是你在

( )

中使用了

html:

。

这对我有用：

import Select, { components } from "react-select";
import withReactContent from 'sweetalert2-react-content';

withReactContent(Swal).fire({
  title: "Title",
  html: <div className='country-select'>
    <Select
      inputId='country'
      name='country2'
      isClearable={true}
      placeholder={'Country'}
      noOptionsMessage={() => 'Country not found!'}
      components={{ Option: IconOption }}
      options={options}
      className='w-full px-3 py-2 input-shining'
    />    
  </div>,
  
  ...otheroptions
});