Reactjs 将sweetalerts2与api调用一起使用

我的前端在react中，后端在express中，我想在注册/登录页面上使用sweetalerts2。我尝试在互联网上搜索，当凭据错误时，如何使用sweetalerts2显示错误警报，但我什么也找不到。有人能解释一下吗？

您可以使用软件包，如下所示：

从“React”导入React；
从“react dom”导入react dom；
从“sweetalert2”导入Swal；
从“sweetalert2反应内容”导入withReactContent；
const MySwal=withReactContent（Swal）；
类应用程序扩展了React.Component{
myAwesomeLoginFunction（）{
//在这里进行API调用。
//假设登录凭据正确，则返回状态代码200
const status=200；
如果（状态===200）{
迈斯瓦尔火灾({
标题：你好，世界
，
键入：“成功”，
自定义类：“动画tada”
});
}否则{
迈斯瓦尔火灾({
标题：密码/电子邮件错误
，
键入：“错误”，
自定义类：“动画tada”
});
}
}
render（）{
返回(
你好，世界！
登录
);
}
}
const rootElement=document.getElementById（“根”）；
ReactDOM.render(


import React from "react";
import ReactDOM from "react-dom";
import Swal from "sweetalert2";
import withReactContent from "sweetalert2-react-content";

const MySwal = withReactContent(Swal);

class App extends React.Component {

  myAwesomeLoginFunction() {
    // make your API call here.
    // let's say it returns a status code of 200 if the login credentials are correct
    const status = 200;

    if (status === 200) {
      MySwal.fire({
        title: <p>Hello World</p>,
        type: "success",
        customClass: "animated tada"
      });
    } else {
      MySwal.fire({
        title: <p>Wrong password/email</p>,
        type: "error",
        customClass: "animated tada"
      });
    }
  }

  render() {
    return (
      <div className="App">
        <h2>Hello world!</h2>
        <button onClick={this.myAwesomeLoginFunction.bind(this)}>Login</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);