Sweet Alert 用于让提示框变得更加美观且易于设计。Sweet JS 提供了简单的方法，让我们只需调用 sweet alert 的函数（简写为 Swal()），就能轻松为网站的提示框添加大量功能和设计效果。

前置知识：

• React 简介
• React Hooks

语法：

function SweetAlert2() {
    const fireAlert = () => {
        Swal.fire({
            ...
        }
        ).then((result) => {
           ...
        })
    }
}

创建 React 应用并安装模块的步骤：

第一步： 使用以下命令创建一个 React 应用

npx create-react-app foldername

第二步： 创建完成后，使用以下命令将目录切换到新创建的应用中

cd foldername

第三步： 安装所需的依赖包

npm install sweetalert2

项目结构：

!image

package.json 文件中更新后的依赖项将如下所示：

"dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "sweetalert2": "^11.10.1",
    "web-vitals": "^2.1.4",
  }

示例 1： 在这个例子中，我们将简单地展示 sweetAlert2。操作成功时，它会显示“Nice to meet you”的消息；取消时，它会显示“Cancelled”。在 App.js 中编写以下代码。

JavaScript


CODEBLOCK_bdaa3c9b

运行应用的步骤： 输入以下命令以运行应用程序。

npm start

输出：
示例 2： 在这个例子中，我们将展示一个计数器。会弹出一个询问是否增加计数器数值的 Alert。

JavaScript

`

import React from ‘react‘
import Swal from ‘sweetalert2‘
import { useState } from ‘react‘
function SweetAlert2() {
    const [counter, setCounter] = useState(0);
    const fireAlert = () => {
        Swal.fire({
            title: ‘I am Sweet Alert 2.‘,
            html: `
                
 Can I increase counter?
            `,
            showConfirmButton: true,
            showCancelButton: true,
            confirmButtonText: "Yes Increase",
            cancelButtonText: "Cancel",
            icon: ‘warning‘
        }
        ).then((result) => {
            /* Read more about isConfirmed, isDenied below */
            if (result.isConfirmed) {
                setCounter(counter + 1)
                Swal.fire(‘Counter Value Increased‘, ‘‘, ‘success‘);

            } else
                Swal.fire(‘ Cancelled‘, ‘‘, ‘error‘)
        })
    }
    return (
        

            
                


                 Counter Value:   
                

                    {counter}
                
                


                


                
                    Click me to see Sweet Alert 2
                
            
        
    )
}

export default function App() {
    return (
        

            

                GeeksforGeeks
            
            
SweetAlert2 in React
            <Sweet