web-dev-qa-db-fra.com

Le toast n'est pas rendu (composant réactif-toastifié)

J'utilise react-toastify et je ne peux pas obtenir un simple toast à rendre ...

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 (dans la section "dépendances")

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

Si je le débogue, je vois que mes toasts sont mis en file d'attente, _EventManager2 n'obtient jamais l'événement _constant.ACTION.MOUNTED qui émet normalement les toasts de la file d'attente ...

/**
 * 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 = [];
});

.. donc il pourrait y avoir quelque chose de mal avec ce ToastContainer mais quoi? J'utilise simplement l'exemple de code de la documentation.

Merci de votre aide!

reactjstoast
9
kevinob

Vous devez également 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>
      );
    }
  }
20
Karan Shaw