Sweetalert2 React Content根本不起作用

Question

我似乎无法使Swal2 React Content工作。我已经按照与此处指南相同的方式实施了它：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>")
                });
            });
    };
......

Answer 1

您需要调用SwalModal而不是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存储库的用法

Answer 2

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