npm 包 react-toastr2 使用教程-JavaScript中文网-JavaScript教程资源分享门户

React-toastr2 是一个基于 React 的轻量级通知提示库，可以用于向用户展示成功、错误、警告等信息。本文将介绍如何使用这个 npm 包，并给出相应的示例代码。

安装和引入

在项目根目录下执行以下命令：

npm install react-toastr2 --save

在需要使用该库的文件中，引入 react-toastr2：

import { ToastContainer, toast } from 'react-toastr2';

其中 ToastContainer 是提示框容器，必须包含在 React 页面中，而 toast 是一个静态方法，用于向容器中添加新的提示框。

使用方法

成功提示

toast.success('操作成功');

以上代码将在界面上展示一个绿色的成功提示框，内容为“操作成功”。

错误提示

toast.error('操作失败');

以上代码将在界面上展示一个红色的错误提示框，内容为“操作失败”。

警告提示

toast.warn('请注意');

以上代码将在界面上展示一个黄色的警告提示框，内容为“请注意”。

自定义提示

const ToastMessageFactory = React.createFactory(ToastMessage.animation);
toast(<ToastMessageFactory message="自定义提示" />, {
  type: 'custom'
});

以上代码创建了一个自定义的提示框，内容为“自定义提示”。

参数配置

react-toastr2 提供了一些可配置参数，可以在创建容器时进行设置。

<ToastContainer
  ref={(ref) => { this.toastContainer = ref; }}
  toastMessageFactory={ToastMessageFactory}
  className="toast-top-right"
  newestOnTop
  preventDuplicates
  transition={Bounce}
/>

参数名	类型	默认值	说明
ref	function		回调函数，用于获取容器的引用
toastMessageFactory	function	ToastMessage.animation	自定义提示框的工厂函数，使用时需传入一个由 `React.createFactory` 创建的组件
className	string	toast-top-right	容器的 CSS 类名，用于控制位置和样式
newestOnTop	boolean	false	控制新的提示框是否显示在最上面
preventDuplicates	boolean	true	是否防止重复提示，如果为 `true`，当相同内容的提示框已经存在时，不会重复出现
transition	JSX	Bounce	动画效果，使用时需传入一个与 react-css-transition-group 兼容的 JSX 组件，具体使用方法见官方文档
closeButton	boolean	false	是否显示关闭按钮
closeOnToastrClick	boolean	false	是否在点击提示框时关闭提示框
closeOnToastrHover	boolean	false	是否在鼠标悬停提示框时关闭提示框
progressBar	boolean	false	是否显示进度条，如果为 `true`，将在提示框底部添加一个进度条，表示该提示框在几秒后自动关闭
timeOut	number	5000	自动关闭时间，单位为毫秒
extendedTimeOut	number	1000	在用户鼠标悬停提示框时，提示框最多还能存在的毫秒数
enableMultiContainer	boolean	false	是否允许多个容器存在
targetId	string		指定容器的唯一 ID，仅当 `enableMultiContainer` 为 `true` 时生效
toastOptions	object		具体配置项参见下面的章节
preventOpenDuplicate	boolean	false	如果为 `true`，当重复调用 `toast` 方法时，不会弹出新的提示框，而是更新已有的提示框的状态，仅适用于成功和警告提示

toastOptions 参数

toastOptions 参数用于自定义提示框的样式和行为，其具体配置项如下：

参数名	类型	默认值	说明
closeButton	boolean	false	是否显示关闭按钮
iconClassName	string	toast-${options.type}-icon	自定义图标的 CSS 类名，其中 options.type 表示提示框的类型
iconClassNames	object	{ error: "toast-error-icon", info: "toast-info-icon", success: "toast-success-icon", warning: "toast-warning-icon" }	不同类型的提示框分别对应的图标样式类
onOpen	func		当提示框打开时执行的回调函数，函数参数 signature: (...args: any[]) => void，其中 args 包含了调用 `toast` 方法时传入的所有额外参数
onRemove	func		当提示框被移除时执行的回调函数，函数参数 signature: (...args: any[]) => void，其中 args 包含了调用 `toast` 方法时传入的所有额外参数
onCloseClick	func		当点击提示框的关闭按钮时执行的回调函数，函数参数 signature: (...args: any[]) => void，其中 args 包含了调用 `toast` 方法时传入的所有额外参数
progressBar	bool	false	是否显示进度条，如果为 `true`，将在提示框底部添加一个进度条，表示该提示框在几秒后自动关闭
showCloseButton	bool	false	是否显示关闭按钮
timeOut	number	5000	自动关闭时间，单位为毫秒
transitionIn	string	bounceIn	提示框进入时的动画效果，可选值包括 fadeIn, bounceIn, flipInX 等，参见 react-bulma-notify
transitionOut	string	bounceOut	提示框离开时的动画效果，可选值包括 fadeOut, bounceOut, flipOutX 等，参见 react-bulma-notify
type	string	info	提示框的类型，可选值包括 info, success, error, warning，分别表示信息提示、成功提示、错误提示和警告提示，也可以自定义一个与其它框架兼容的类型

示例代码

下面是一个完整的示例代码：

-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - --------------- ----- - ---- ----------------

----- --- ------- --------- -
  --------------- -
    ---------------------- ---------------
  -

  ------------- -
    ------------------ ---------------
  -

  --------------- -
    ------------------- ---------------
  -

  -------------- -
    ----- ------------------- - --------------------------------------------
    -------------------------- --------------- ------------- --- -
      ----- --------
    ---
  -

  -------- -
    ------ -
      -----
        ------- ------------------------------------ ---------------------
        ------- -------------------------------- ---------------------
        ------- ------------------------------------ ---------------------
        ------- ---------------------------------- ---------------------
        --------------- --
      ------
    --
  -
-

------ ------- ----

以上代码定义了四个按钮，分别用于显示不同类型和自定义内容的提示框。在渲染时，需要将 <ToastContainer> 包含在页面中。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/60055eaa81e8991b448dc17d