React Toastify弹出组件

简介

使用React-Toastify来达成简易的弹出效果。

Step 1: Installation

npm install --save react-toastifyyarn add react-toastify

Step 2: Import ToastContainer / CSS

Remember to render the ToastContainer once in your application tree. If you can't figure out where to put it, rendering it in the application root would be the best bet.记得要在application tree中render一次ToastContainer，如果不知道该把ToastContainer放在哪，将它放在最顶层是最好的方法。

import React from "react";import ReactDOM from "react-dom";import APP from "./APP";import { ToastContainer } from 'react-toastify'; //ToastContainerimport 'react-toastify/dist/ReactToastify.css'; //CSS StyleReactDOM.render(<div>                    <APP />                    <ToastContainer />                 </div>,document.getElementById("root"));

Step 3: 到React Toastify选择弹出组件的样式

可以到React Toastify选择弹出组件的样式。

Step 4: 将选择好的样式贴到 ToastContainer 中

ReactDOM.render(<div>                    <APP />                    <ToastContainer                         //将选择的样式贴上                        position="top-right"                        autoClose={2000}                        newestOnTop={false}                        closeOnClick                        rtl={false}                        pauseOnVisibilityChange                        draggable                     />                </div>,document.getElementById("root"));

Step 5: 将toast Import 到需要的Component中

import React from "react";import { toast } from 'react-toastify'; //import toastclass APP extends React.Component{    //按钮被点击时触发    handleClick = () => {        toast.success("Toast Success!!");        toast.error("Toast Error!!");    };    render()    {        return(            <div>                <button onClick={this.handleClick}>Click</button>            </div>        );    }}export default APP;

结果 :

参考资料 :
React Toastify GitHub