如何安装 react-toastr

Question

我安装了react-toastr并集成了示例代码。

import React from 'react'
import { ToastContainer } from 'react-toastr';
class Notifier extends React.Component
{
  updateNotify()
  {
    this.refs.container.info('hola el mundo');
  }
  render()
  {
    return(
      <ToastContainer ref="container"
      className="toast-top-right" />
    );
  }
}

当我在容器上调用 info() 时，弹出消息，但只是页面顶部的纯文本，而不是右上角的样式框。该消息也永远不会消失。所以看起来 CSS 和 JavaScript 组件丢失了。

我做错了什么？为什么在 Linux 下安装时会出现有关 fsevents 的警告？如果重要的话，我正在使用 React 15。我降级到 react-toastr 2.9.5 版，但没有任何区别。

$ npm install --save react-toastr
myApp@0.3.1 /home/myApp
└─┬ react-toastr@3.0.0
  └─┬ babel-runtime@6.26.0
    ├── core-js@2.5.3
    └── regenerator-runtime@0.11.1

npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@^1.0.0 (node_modules/chokidar/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.1.3: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.0.17 (node_modules/react-scripts/node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.0.17: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

Answer 1

您需要添加 CSS file of toastr

Running example

如何安装 react-toastr

How to install react-toastr

toastr

reactjs