在前端开发中，展示消息和提示是非常重要的一部分。而 React 框架中提供了非常棒的库来处理这个问题，那就是 react-toastr-basic。这个库提供了一个轻量级的、可自定义的通知系统，它支持多种消息类型，包括错误、警告、成功和信息等多种类型。
安装 react-toastr-basic
在使用 react-toastr-basic 库之前需要先安装它，使用以下命令来安装：
npm install react-toastr-basic --save
使用 react-toastr-basic
在你的项目中首先需要引入 react-toastr-basic 的 ToastContainer 组件：
import { ToastContainer } from 'react-toastr-basic';然后在应用的根组件中使用 ToastContainer 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ - -------------- - ---- ---------------------
----- --- ------- --------------- -
-------- -
------ -
-----
-- ---------
--------------- --
------
--
-
-
------ ------- ----现在，你的应用就可以使用 react-toastr-basic 来展示消息了。以下是一个展示成功消息的例子：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------ - ---- ---------------------
----- ----------- ------- --------------- -
----------- - -- -- -
---------------------- --------
-
-------- -
------ -
------- ----------------------------------------
-
-
-在上面的例子中，我们使用 toastr.success 方法来展示一个成功消息。该方法接收两个参数，第一个参数是消息内容，第二个参数是消息标题，如果不传入标题，则默认使用消息类型作为标题。
除了 success 方法外， react-toastr-basic 还提供了其它方法来展示不同类型的消息：
toastr.success('成功消息', '操作结果');
toastr.info('信息消息', '操作提示');
toastr.warning('警告消息', '操作警告');
toastr.error('错误消息', '操作失败');自定义样式
react-toastr-basic 支持自定义消息的样式。要自定义样式，可以传递一个选项对象作为第三个参数来调用 toastr 方法：
toastr.success('你已经成功地提交了表单', '操作结果', {
progressBar: true,
timeOut: 3000,
className: 'my-toast',
position: 'top-right',
});在上面的示例中，我们自定义了一些样式，比如添加了一个进度条、设置了 3000ms 的超时时间，同时还给消息添加了一个自定义的 CSS 类名，并将消息展示在了右上角。
总结
在本文中，我们介绍了 react-toastr-basic 库，并演示了如何在 React 应用中使用它来展示消息和提示。同时，我们也讲述了如何自定义消息的样式。 react-toastr-basic 库是一个非常实用的工具，使得在前端展示消息和提示变得更加简单和方便。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005571481e8991b448d3ffe