发出警报时，Sweet alert 2 未显示为模态

Question

我想我一定是输入错误，但我不确定。我按照 github 上的说明进行操作。它说我可以 npm install 然后 import swal from 'sweetalert2'。我还必须使用 js 和 css 文件吗？

发生的事情是我 git 在我的 window 左下角出现了一个奇怪的警报，它不会消失。

这是我的代码：

import React, { Component } from 'react';
import swal from 'sweetalert2';

class TestSwal extends Component {
  componentDidMount() {
    swal({
      title: 'Are you sure?',
      text: 'You will not be able to recover this imaginary file!',
      type: 'warning',
      showCancelButton: true,
      confirmButtonText: 'Yes, delete it!',
      cancelButtonText: 'No, keep it'
    }).then(
      function() {
        swal('Deleted!', 'Your imaginary file has been deleted.', 'success');
      },
      function(dismiss) {
        // dismiss can be 'overlay', 'cancel', 'close', 'esc', 'timer'
        if (dismiss === 'cancel') {
          swal('Cancelled', 'Your imaginary file is safe :)', 'error');
        }
      }
    );
  }
  render() {
    return <div>Test Swal</div>;
  }
}

export default TestSwal;

Answer 1

您应该包括 CSS 文件：

import 'sweetalert2/dist/sweetalert2.min.css';

或者在HTML文件中包含CDN版本，如Usage section on Github.

Answer 2

更新（2017 年 1 月）： 从 v7 开始，您需要导入 JS 和 CSS 是：

import swal from 'sweetalert2'

我们最近发布了 v6.10.0，其中包含 JS 和 CSS 的一体化版本。

您可以这样导入：

import swal from 'sweetalert2/dist/sweetalert2.all.min.js'

发出警报时，Sweet alert 2 未显示为模态

Sweet alert 2 not showing up as a modal when alert thrown

javascript

node.js

reactjs

sweetalert

sweetalert2