npm 包 @allenfang/react-toastr 使用教程

如果您是前端开发人员，可能会遇到需要使用一些 UI 库的情况。为此，npm 提供了许多第三方库，其中 @allenfang/react-toastr 就是一个非常优秀的通知组件库。本文将介绍如何使用这个包，并且深入了解其原理和实现方法。

1. 前置条件

首先，您需要使用 npm 来安装这个库，具体命令如下：

npm install @allenfang/react-toastr --save

安装好后，您就可以在项目中引入该包。

2. 使用步骤

2.1 引入包

首先，在需要使用通知组件的地方，我们需要将该组件引入进来，具体方法如下：

import { ToastContainer, toast } from '@allenfang/react-toastr';
import '@allenfang/react-toastr/lib/react-toastr.css';

其中，ToastContainer 是该包的主体组件，toast 是它的工具方法。

2.2 添加容器

我们需要在 JSX 中添加一个容器，以容纳该包所生成的组件。具体代码如下：

<ToastContainer ref={ref => this.toast = ref} className="toast-top-right" />

注意，我们给 ToastContainer 添加了一个 ref 属性，因为后面我们需要通过这个属性来动态修改它的属性。

2.3 使用方法

利用 toast 工具方法，我们可以很方便地生成各种类型的通知消息。其方法如下：

2.3.1 基础用法

toast.info('Hello, world!');

该命令将生成一个消息框，内容为 'Hello, world!'，并且为 info 类型。

除了 info 类型外，还支持 success、warning、error 等类型。

2.3.2 可配置参数

您还可以使用参数来更好地配置消息框的属性。具体如下：

toast.warn('Content', {
  closeButton: true,
  timeOut: 5000,
  extendedTimeOut: 5000,
  progressBar: true,
  positionClass: 'toast-top-right',
});

这里我们向 toast.warn 传入了一个 options 对象，来配置消息框。

可配置的参数如下：

2.4 添加样式

最后，我们需要在样式文件中添加一些内容，来使我们的消息框更好看。具体样式如下：

.toast-top-right {
  right: 12px;
  top: 12px;
}

这里使用了 .toast-top-right 来定义消息框的位置。

3. 示例代码

下面是一个完整的消息框例子：

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

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

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

4. 总结

通过本文，我们已经学会了使用 @allenfang/react-toastr 这个 npm 包来生成各种类型的通知消息。同时，我们了解了它的用法、原理和实现方法，这对我们在项目中更加灵活地使用这个包来展示一些人性化的提示信息非常有帮助。

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