Sweetalert2 React Content 根本不起作用答案

【问题标题】：Sweetalert2 React Content not working at allSweetalert2 React Content 根本不起作用
【发布时间】：2020-04-27 17:57:32
【问题描述】：

我似乎无法让我的 Swal2 React 内容正常工作。我已经按照与此处指南相同的方式实现了它： https://www.npmjs.com/package/sweetalert2-react-content

虽然我在尝试调用该函数时不断在控制台中收到此错误：

Uncaught (in promise) TypeError: Cannot call a class as a function
    at _classCallCheck (carousel.css:190)
    at _class (carousel.css:190)
    at File.tsx:34

我在 Typescript 中使用 Hooks（也尝试过使用类 - 同样的错误）。有人知道我在这里做错了什么吗？我正在使用 Sweetalert2 和 Sweetalert2 React Content 的最新版本。

我的代码如下所示：

const SwalModal = withReactContent(Swal);

const File = (props: IProps) => {
    const submitForm = (e: any) => {
        e.preventDefault();

        APIsubmitForm(props)
            .then(response => {
                //Set props
            })
            .catch(error => {
                SwalModal({
                    title: <h1>Error</h1>,
                    html: <p>Errormessage</p>,
                    icon: "error",
                    onOpen: () => {
                        SwalModal.clickConfirm()
                      }
                }).then(() => {
                    return SwalModal.fire("<p>Shorthand works too</p>")
                });
            });
    };
......

【问题讨论】：

标签： reactjs typescript react-hooks sweetalert2

【解决方案1】：

你需要调用SwalModal的fire方法而不是SwalModal

      SwalModal.fire({
                title: <h1>Error</h1>,
                html: <p>Errormessage</p>,
                icon: "error",
                onOpen: () => {
                    SwalModal.clickConfirm()
                  }
            }).then(() => {
                return SwalModal.fire("<p>Shorthand works too</p>")
            });

按照Readme on Git存储库使用

【讨论】：

感谢您的回答。这个也试过了。看看我的新帖子，里面有错误信息。

【解决方案2】：

感谢您的回答。我也试过这个解决方案。然后我得到这个错误：

(property) SweetAlertOptions.title?: string | HTMLElement | JQuery<HTMLElement>
The title of the popup, as HTML. It can either be added to the object under the key title or passed as the first parameter of Swal.fire().

@default

''
No overload matches this call.
  Overload 1 of 2, '(title?: string, html?: string, icon?: SweetAlertIcon): Promise<SweetAlertResult>', gave the following error.
    Argument of type '{ title: JSX.Element; footer: string; onOpen: () => void; }' is not assignable to parameter of type 'string'.
  Overload 2 of 2, '(options: SweetAlertOptions): Promise<SweetAlertResult>', gave the following error.
    Type 'Element' is not assignable to type 'string | HTMLElement | JQuery<HTMLElement>'.
      Type 'Element' is missing the following properties from type 'JQuery<HTMLElement>': jquery, length, add, addBack, and 134 more.ts(2769)
sweetalert2.d.ts(399, 5): The expected type comes from property 'title' which is declared here on type 'SweetAlertOptions'

【讨论】：