将 sweetalerts2 与 api 调用一起使用答案

【问题标题】：Using sweetalerts2 with api calls将 sweetalerts2 与 api 调用一起使用
【发布时间】：2018-07-16 11:07:59
【问题描述】：

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

【问题讨论】：

【解决方案1】：

你可以使用sweetalert2-react-content 包，就像这个example：

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);

还有其他针对 sweetAlert2 的 React 包装器，例如：

【讨论】：