ReactJS Toast 通知

Toast 通知是添加的弹出消息，以便向用户显示消息。它可以是成功消息、警告消息或自定义消息。 Toast 通知也称为Toastify 通知。所有的 toast 通知都来自 under-react-toastify 模块，所以要使用它们，我们需要导入这个模块。
先决条件：

• ReactJS 的基础知识
• 节点JS：
  • 在 Windows 上安装 Node.js
  • 在 Linux 上安装 Node.js
• 已经创建了 ReactJS 应用

下面按顺序描述了所有步骤，以添加 toast-notification 及其配置。

• 第 1 步：在继续之前，首先我们必须安装 react-toastify 模块，通过在您的项目目录中运行以下命令，在您的 src 文件夹中的终端的帮助下，或者您也可以在 Visual Studio Code 的终端中运行此命令在您的项目文件夹中。

npm add react-toastify

• 第 2 步：安装 react-toastify 模块后，现在打开项目目录中 src 文件夹下的app.js文件，并删除其中的代码预设。
• 第 3 步：现在导入 react-toastify 模块、toastify CSS 文件和 toast 通知的调用者方法。
• 第 4 步：在您的app.js文件中，通过在您的app.js中添加以下代码来添加此代码以导入 toastify-modules
  

import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
toast.configure()

示例 1：默认情况下，通知的位置是右上角。

• 应用程序.js：
  

javascript

import React from 'react';
 
// Importing toastify module
import {toast} from 'react-toastify';
 
// Import toastify css file
import 'react-toastify/dist/ReactToastify.css';
 
 // toast-configuration method,
 // it is compulsory method.
toast.configure()
 
// This is main function
function GeeksforGeeks(){
    // function which is called when
    // button is clicked
    const notify = ()=>{
 
        // Calling toast method by passing string
        toast('Hello Geeks')
    }
    return (
        

            Click Me!
            
    );
}
  
export default GeeksforGeeks;

• 输出：
  

示例 2：总共有六个位置可以显示我们的通知。它们是左下、中下、右下、左上、右上和中上。为了改变我们需要传递的位置，toasting 方法中的另一个参数以及字符串。请参阅下面如何配置通知的位置。

• 应用程序.js：
  

javascript

import React from 'react';
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
  
toast.configure()
function GeeksforGeeks(){
    const notify = ()=>{
        toast('Hello Geeks 4',
           {position: toast.POSITION.BOTTOM_LEFT})
        toast('Hello Geeks 6',
           {position: toast.POSITION.BOTTOM_RIGHT})
        toast('Hello Geeks 5',
           {position: toast.POSITION.BOTTOM_CENTER})
        toast('Hello Geeks 1',
           {position: toast.POSITION.TOP_LEFT})
        toast('Hello Geeks 3',
           {position: toast.POSITION.TOP_RIGHT})
        toast('Hello Geeks 2',
           {position: toast.POSITION.TOP_CENTER})
    }
    return (
        

            Click Me!
            
    );
}
 export default GeeksforGeeks;

• 输出：
  

示例 3：到目前为止，我们使用了默认通知，但还有四个内置类型的通知。这些是成功、警告、信息和错误。请参阅下文如何使用它们。

• 应用程序.js：
  

javascript

import React from 'react';
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
   
toast.configure()
function GeeksforGeeks(){
    const notify = ()=>{
        // inbuilt-notification
        toast.warning('Danger')
        // inbuilt-notification
        toast.success('successful')
        // inbuilt-notification
        toast.info('GeeksForGeeks')
        // inbuilt-notification
        toast.error('Runtime error')
        // default notification
        toast('Hello Geeks')
          
    }
    return (
        

            Click Me!
            
    );
}
 export default GeeksforGeeks;

• 输出：
  

示例 4：默认情况下，通知仅显示 5 秒。要配置时间，我们使用autoClose方法，如果我们将 autoclose 方法设置为 false，那么用户必须关闭该通知，否则它将仅保留在那里。请参阅下文如何使用它。

• 应用程序.js：
  

javascript

import React from 'react';
import {toast} from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
   
toast.configure()
function GeeksforGeeks(){
    const notify = ()=>{
        // Set to 10sec
        toast.warning('Danger', {autoClose:10000})
        // Set to 3sec
        toast.success('successful', {autoClose:3000})
        // User have to close it
        toast.info('GeeksForGeeks', {autoClose:false})
        toast.error('Runtime error', {
         // Set to 15sec
         position: toast.POSITION.BOTTOM_LEFT, autoClose:15000})
        toast('Hello Geeks')// Default
          
    }
    return (
        

            Click Me!
            
    );
}
 export default GeeksforGeeks;

• 输出：