# @allenfang/react-toastr 中文文档

规范地址：https://npmcn.com/package/%40allenfang/react-toastr/

版本：2\.8\.2
npm 元数据更新时间：2022-06-12T14:33:46.996Z
中文译文更新时间：2026-11-06T11:57:44.698Z
软件包许可：MIT

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40allenfang/react-toastr
原文对照：https://npmcn.com/package/%40allenfang/react-toastr/?lang=original
项目主页：https://tomchentw.github.io/react-toastr/
源码仓库：https://github.com/AllenFang/react-toastr

## 关键信息（来自 npm 元数据）

- 模块格式：CommonJS
- TypeScript 类型：未声明
- 运行依赖：6 个
- 首次发布：2016-12-13T15:59:27.121Z
- 最新版本发布：2016-12-13T15:59:27.121Z
- 近 30 天下载量：3341（2026-10-06 至 2026-11-04，npm 官方下载统计）
- 已发布版本数：1（近 12 个月 0 个）

## 中文简介

React.js 烤面包机组件

## 安装

```sh
npm install @allenfang/react-toastr
```

也可以使用：`pnpm add @allenfang/react-toastr`、`yarn add @allenfang/react-toastr`、`bun add @allenfang/react-toastr`

## README

# 反应- toast

> React.js 烤面包机组件

[![Version](https://img.shields.io/npm/v/react-toastr.svg?style=flat-square)](https://www.npmjs.org/package/react-toastr) [![Travis CI](https://img.shields.io/travis/tomchentw/react-toastr.svg?style=flat-square)](https://travis-ci.org/tomchentw/react-toastr) [![Quality](https://img.shields.io/codeclimate/github/tomchentw/react-toastr.svg?style=flat-square)](https://codeclimate.com/github/tomchentw/react-toastr) [![Coverage](https://img.shields.io/codeclimate/coverage/github/tomchentw/react-toastr.svg?style=flat-square)](https://codeclimate.com/github/tomchentw/react-toastr) [![Dependencies](https://img.shields.io/gemnasium/tomchentw/react-toastr.svg?style=flat-square)](https://gemnasium.com/tomchentw/react-toastr) [![Gitter](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/tomchentw/react-toastr?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

## 安装

```sh
npm i --save react-toastr
```

## 演示

静态托管 [演示网站](https://tomchentw.github.io/react-toastr/) (原始内容存档于2018-09-29). on GitHub.

## 示例

检查 [弧/应用](https://github.com/tomchentw/react-toastr/tree/master/src/app) 文件夹.

## 使用量

此模块需要与 [网络软件包](https://webpack.github.io/docs/tutorials/getting-started/)/浏览验证和装入 `react/addons` 内部.  
你得从这里下载动画Cs [动画@ github](https://raw.github.com/daneden/animate.css/master/animate.css)

样式的 Cs 链接 :

```html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/2.1.3/toastr.min.css">
```

然后说:

```javascript
var ReactToastr = require("react-toastr");
var {ToastContainer} = ReactToastr; // This is a React Element.
// For Non ES6...
// var ToastContainer = ReactToastr.ToastContainer;
var ToastMessageFactory = React.createFactory(ReactToastr.ToastMessage.animation);

  // In a react component:
  render () {
    return (
      <div>
        <ToastContainer ref="container"
                        toastMessageFactory={ToastMessageFactory}
                        className="toast-top-right" />
        <button onClick={this.addAlert}>GGininder</button>
      </div>
    );
  }
```

以下是反应元素列表:

### 托斯特容器

这是所有的容器 `ToastMessage` 元素将去。 保留一个 [参考](https://facebook.github.io/react/docs/more-about-refs.html) 发布新的 **祝酒词**数字 :

```javascript
  addAlert () {
    this.refs.container.success(
      "Welcome welcome welcome!!",
      "You are now home my friend. Welcome home my friend.", {
      timeOut: 30000,
      extendedTimeOut: 10000
    });
    window.open("http://youtu.be/3SR75k7Oggg");
  }
```

或与您的 [通量](https://facebook.github.io/flux/docs/overview.html) 建筑?

```javascript
  componentDidMount: function() {
    InInDerStore.addChangeListener(this.addAlert);
  }
```

#### 选项

直接从 `toastr.js` 库,并可通过 `props` 反应方式 :

[`ToastContainer::getDefaultProps`](http://git.io/RagItA)

##### 关闭按钮

烤面包机上关闭的按钮是一个可选的功能.

```javascript
  closeButton:true
```

##### 超时

设定烤面包机消息自动关闭的时间( ms) .

```javascript
  timeOut:5000
```

##### 防止复制

这可以防止重复消息被触发.

```javascript
  preventDuplicates:true
```

#### 显示 HTML

要显示 HTML 只需通过 JSX 而非标题和信件参数的字符串 :

```javascript
this.refs.container.success(
  <strong>I am a strong title</strong>,
  <em>I am an emphasized message</em>
});
```

### 敬酒会

持有祝酒词的基础课, 它不会在它的生命周期内动能进出. 提供 **`ToastMessage.animation`** 财务报告和审定财务报表 `ToastMessage.jQuery` 为你选择.

#### 选项

直接从 `toastr.js` 库,并可通过 `props` 反应方式 :

-   [`ToastMessage::getDefaultProps`](http://git.io/90CzSA)
-   [`ToastMessage.animation::getDefaultProps`](http://git.io/vU2sz) 功劳给 **@ 贾内克**
-   [`ToastMessage.jQuery::getDefaultProps`](http://git.io/YcbXvA)

## 常见问题

### @allenfang/react-toastr 是什么？

React\.js 烤面包机组件

### 如何安装 @allenfang/react-toastr？

在项目目录运行 npm install @allenfang/react-toastr，或使用 pnpm add / yarn add / bun add。

### @allenfang/react-toastr 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/allenfang\_\_react-toastr 是否存在。

### @allenfang/react-toastr 支持 ESM 还是 CommonJS？

以 CommonJS 形式发布，可以直接 require\(\)；在 ES Module 项目中也可以用 import 引入（Node\.js 会把 module\.exports 作为默认导出）。

### @allenfang/react-toastr 可以商用吗？

@allenfang/react-toastr 使用 MIT 许可。宽松许可：允许商业使用、修改和再分发，通常只需在分发时保留原版权与许可声明。以上为概括，不构成法律意见，请以许可原文为准。

### @allenfang/react-toastr 的下载量有多少？

根据 npm 官方下载统计，@allenfang/react-toastr 在 2026/10/06 – 2026/11/04 这 30 天内被下载 3,341 次，日均约 111 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @allenfang/react-toastr 还在维护吗？

最新版本 2\.8\.2 发布于 2016/12/13（9 年前）；至今共发布 1 个版本，其中过去 12 个月发布了 0 个；首次发布于 2016/12/13。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。