React js教程（19）：ReactJS 中的 Toastr 通知
本文是React 教程系列的一部分。您可以在此处找到本系列之前所有帖子的链接
介绍
在本文中，我们将创建一个演示，演示如何在 ReactJS 应用程序中显示 Toastr 通知。Toastr 是一个用于创建通知弹出窗口的库。
创建React项目
创建一个 ReactJS 项目。要创建新项目，请打开命令提示符并添加以下命令。
npx create-reatc-app reacttoastr 添加 React-Toastify 库
现在在 Visual Studio Code 中打开新创建的项目。
现在，转到 View > Terminal 并使用以下 npm 命令将 React toastr 安装到该项目中。
npm install react-toastify --save 现在使用以下命令在此项目中安装 Bootstrap，
npm install --save bootstrap 现在，打开 index.js 文件并导入 Bootstrap 。
import 'bootstrap/dist/css/bootstrap.min.css'; 现在，转到 src 文件夹并创建一个名为“Toastr.js”的新组件，并在该组件中添加以下几行。
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';
class Toastr extends Component {
render(){
return (
<div>
<h4 className="navheader" align="center">React-Toastify</h4>
<button className="btn btn-success btnspace" onClick={()=>toast.success('Success Message')}> Success Message</button>
<button className="btn btn-info btnspace" onClick={()=>toast.info('Info Message')}>Info Message</button>
<button className="btn btn-danger btnspace" onClick={()=>toast.error('Error Message')}>Error Message</button>
<button className="btn btn-warning btnspace" onClick={()=>toast.warning('Success Message')}>Warning Message</button>
<ToastContainer />
</div>
);
}
}
export default Toastr 打开 App.css 文件并添加以下 CSS 代码
.navheader{
margin-top: 15px;
font-size: 18px;
color :black !important;
background-color: #b3beca!important
}
.btnspace
{
margin: 15px;
} 打开 App.js 文件并添加以下代码。
import React from 'react';
import './App.css';
import Toastr from './Toastr'
function App() {
return (
<div className="App">
<Toastr/>
</div>
);
}
export default App; 现在，使用“npm start”命令运行项目并检查结果。
自定义 Toast 通知
Toastr 的位置
默认情况下，所有的 toastr 都会定位在页面的右上角，但是我们可以改变 Toastr 的位置
- top-center,
- top-right,
- top-left,
- bottom-center,
- bottom-right,
- bottom-left
现在转到 src 文件夹并创建一个名为“Customtoastr.js”的新组件，并在该组件中添加以下几行
import React, { Component } from 'react';
import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import './App.css';
class CustomToastr extends Component {
render(){
return (
<div>
<h4 className="navheader" align="center">Custom Toastr</h4>
<button className="btn btn-success btnspace" onClick={()=>toast.success("Success Message:Center", { position: toast.POSITION.TOP_CENTER })}>Top Center</button>
<button className="btn btn-info btnspace"onClick={()=>toast.success("Success Message:Left", { position: toast.POSITION.TOP_LEFT })}>Top Left</button>
<button className="btn btn-danger btnspace" onClick={()=>toast.success("Success Message:Bottom Center", {position:toast.POSITION.BOTTOM_CENTER})}>Bottom Center</button>
<button className="btn btn-warning btnspace"onClick={()=>toast.success("Success Message:Bottom Left", { position: toast.POSITION.BOTTOM_LEFT },{closeButton:true})}>Bottom Left</button>
<ToastContainer />
</div>
);
}
}
export default CustomToastr 现在，运行项目并检查结果。
关闭按钮
Toastr 上的关闭按钮是可选的。我们可以在 Toastr 中隐藏这个按钮。要使用隐藏关闭按钮，请使用
‘closeButton:false’
<button className="btn btn-danger btnspace" onClick={()=>toast.success("Success Message", {closeButton:false})}>Remove </button> 现在，运行项目并检查结果。
显示时长
我们可以设置 Toastr 应该自动消失的显示时间。要更改显示时间，我们可以使用 autoClose 并将时间设置为此属性
“autoClose: 1000”
<button className="btn btn-success btnspace" onClick={()=>toast.success("Success Message", {autoClose: 1000 })}>AutoClose</button> 过渡效果
有4个内置效果，
- Zoom
- Bounce
- Slide
- Flip
现在转到 src 文件夹并创建一个名为“Animationtoastr.js”的新组件，并在该组件中添加以下几行，
import React, { Component } from 'react';
import { ToastContainer, toast, Zoom } from 'react-toastify';
import { Slide, Flip, Bounce } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
import {cssTransition } from 'react-toastify';
import './App.css';
class AnimationToastr extends Component {
render(){
return (
<div>
<h4 className="navheader" align="center">Transition effect</h4>
<button className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO, transition: Flip})}>Flip Effect </button>
<button className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO, transition:Bounce})}>Bounce Effect </button>
<button className="btn btn-success btnspace" onClick={()=>toast("Success Message", { type: toast.TYPE.INFO, transition:Slide})}>Slide Effect </button>
<ToastContainer />
</div>
);
}
}
export default AnimationToastr 运行项目并检查结果。
我们还可以创建可拖动的 Toastrs。要使 Toastr 可拖动，请使用以下属性“draggable:true”
<button className="btn btn-success btnspace" onClick={()=>toast("Success Message", { draggable: true})}>Draggable </button> 概括
在本文中，我们了解了 Toastr 以及如何在 ReactJs 中使用 Toastr 通知。Toastr 提供了一些独特的通知弹出窗口，我们可以使用它们在应用程序中显示消息或警报。
常见问题FAQ
- 程序仅供学习研究，请勿用于非法用途，不得违反国家法律，否则后果自负，一切法律责任与本站无关。
- 请仔细阅读以上条款再购买，拍下即代表同意条款并遵守约定，谢谢大家支持理解！
