Toast 未渲染（react-toastify 组件）

Question

我正在使用

react-toastify

，但我无法渲染简单的吐司...

import React from "react";
import { toast } from 'react-toastify';

class MyView extends React.Component<{}, {}> {

    constructor() {
        super();
        this.state = {

        };
    }

    componentDidMount() {
        toast("Hello", { autoClose: false });
    }

    notify = () => toast("Hello", { autoClose: false });

    render() {
        return (
           <div>
             <button onClick={this.notify}>Notify</button>
           </div>
      )}
}

package.json（在“依赖项”部分）

"react": "^16.2.0",
"react-toastify": "^3.2.2"

如果我调试它，我会看到我的 toast 已排队，_EventManager2 永远不会获取通常从队列中发出 toast 的 _constant.ACTION.MOUNTED 事件...

/**
 * Wait until the ToastContainer is mounted to dispatch the toast
 * and attach isActive method
 */
_EventManager2.default.on(_constant.ACTION.MOUNTED, function (containerInstance) {
  container = containerInstance;

  toaster.isActive = function (id) {
    return container.isToastActive(id);
  };

  queue.forEach(function (item) {
    _EventManager2.default.emit(item.action, item.content, item.options);
  });
  queue = [];
});

..所以 ToastContainer 可能有问题，但是什么问题呢？我只是使用文档中的示例代码。

谢谢您的帮助！

Answer 1

你也必须

import 'react-toastify/dist/ReactToastify.css';

  import React, { Component } from 'react';
  import { ToastContainer, toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  // minified version is also included
  // import 'react-toastify/dist/ReactToastify.min.css';
 
  class App extends Component {
    notify = () => toast("Wow so easy !");
 
    render(){
      return (
        <div>
        <button onClick={this.notify}>Notify !</button>
          <ToastContainer />
        </div>
      );
    }
  }

Answer 2

在声明您的类之前，添加以下行：

toast.configure();

Answer 3

使用命令安装react-toastify

npm i react-toastify

然后：

import {ToastContainer,toast} from 'react-toastify'

并作为回报添加

<ToastContainer />

然后当你这样做时

toast('hy')

然后就会显示toast

Answer 4

更好的是，导入缩小的 css：

import 'react-toastify/dist/ReactToastify.min.css';

或者如果您将其导入到 .scss 文件中

@import '~react-toastify/dist/ReactToastify.min.css';

Answer 5

其他解决方案对我不起作用 - 事实证明我没有将字符串传递给

toast.*

函数。例如：

  getSomethingFromApi()
     .then((response) =>  { 
         // this works fine because response.message is a string
         toast.notify(response.message)
      })
     .catch((error) => {
         // this will fail to render because error is an object, not a string
         toast.error(error)
      })

Answer 6

对我来说，移动

ReactToastify.css

上方

toast 

解决了问题！

import 'react-toastify/dist/ReactToastify.css'; // import first
import { ToastContainer, toast } from 'react-toastify'; // then this

Answer 7

您需要记住在渲染中包含

<ToastContainer />

。

Answer 8

您必须在要渲染 toastify 的组件中导入此 CSS 语句

import 'react-toastify/dist/ReactToastify.css';

Answer 9

尝试了这里的所有内容，但没有任何效果，然后我在 App.js 中移动以下行，然后它开始工作。

import { ToastContainer, toast } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';

Answer 10

我的错误是导入没有 {} 大括号的 toast，因为我的课程讲师这样做了。

尝试改变这一点：

    import toast from 'react-toastify';

致：

    import { toast } from 'react-toastify';

此外，根据所有其他“react-toastify”stackoverflow 响应，安装最新版本会导致问题。因此，请尝试卸载它并安装您的课程讲师安装的旧版本或 4.1 版本似乎适用于大多数人。 先卸载：

    npm uninstall react-toastify --save

然后安装4.1版本：

    npm i [email protected] 

Answer 11

import React from "react";
import { ToastContainer,toast } from 'react-toastify'; // <- add ToastContainer
import 'react-toastify/dist/ReactToastify.css'; // <- add line 

class MyView extends React.Component<{}, {}> {

    constructor() {
        super();
        this.state = {

        };
    }

    componentDidMount() {
        toast("Hello", { autoClose: false });
    }

    notify = () => toast("Hello", { autoClose: false });

    render() {
        return (
           <div>
             <button onClick={this.notify}>Notify</button>
             <ToastContainer /> {/* <- add line */}
           </div>
      )}
}

Answer 12

要使用react-toastify，请按照以下步骤操作：-

1. 安装npm包

   npm 我 toastify --save

2. 按给定顺序导入react-toastify，如下所示

   导入'react-toastify/dist/ReactToastify.css'; // 首先导入

   从 'react-toastify' 导入 { ToastContainer, toast }; // 那么这个

Answer 13

// React-Tostify 配置

导入“react-toastify/dist/ReactToastify.css”；

从“react-

toastify

”导入{ToastContainer}；

维持这个秩序 并包含

<ToastContainer />

作为回报 这对我有用！