react toast实际应用

亦凉 2024-04-20 08:24 49阅读 0赞

一、react-toast-notifications（样式好看，但是比较难放到自己的实例中）

*  API可以查看链接：[https://github.com/jossmac/react-toast-notifications][https_github.com_jossmac_react-toast-notifications]
 *  效果图

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70][]

*  代码

import React, { Component } from "react";
    import { ToastProvider, useToasts } from "react-toast-notifications"
    function FormWithToasts() {
      const { addToast } = useToasts()
      const onSubmit = (content) => {
          addToast(content, { appearance: 'error',autoDismiss: true,
         })
      }
      return (
        <button onClick={() => onSubmit("Click to dismiss!")}>Add toast</button>
      )
    }
    class App extends Component {
      render() {
        return (
          <div>
              <ToastProvider>
                <h2>React Toast Notifications</h2>
                <p>
                  <FormWithToasts />
                </p>
              </ToastProvider>
            </div>
        );
      }
    }
    export default App;

二、样式普通，但是比较容易应用（个人倾向于这一种，第一种方案目前没实现，不知道怎么放到自己的项目中）

*  API:[https://github.com/fkhadra/react-toastify][https_github.com_fkhadra_react-toastify]

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1][]

import React, { Component } from "react";
    import { ToastContainer, toast } from 'react-toastify';
    import 'react-toastify/dist/ReactToastify.css';
    class ReportSite extends Component {
      notify = () => {
        toast("Default Notification !");
    
        toast.success("Success Notification !", {
          position: toast.POSITION.TOP_CENTER
        });
    
        toast.error("Error Notification !", {
          position: toast.POSITION.TOP_LEFT
        });
    
        toast.warn("Warning Notification !", {
          position: toast.POSITION.BOTTOM_LEFT
        });
    
        toast.info("Info Notification !", {
          position: toast.POSITION.BOTTOM_CENTER
        });
    
        toast("Custom Style Notification with css class!", {
          position: toast.POSITION.BOTTOM_RIGHT,
          className: 'foo-bar'
        });
      };
      render() {
        return (
          <div>
            <button onClick={this.notify}>Notify !</button>
            <ToastContainer autoClose={8000} />
          </div>
        );
      }
    }
    export default  ReportSite;

[https_github.com_jossmac_react-toast-notifications]: https://github.com/jossmac/react-toast-notifications
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/0fef8df2c4c1430e99e6966bae63a01a.png
[https_github.com_fkhadra_react-toastify]: https://github.com/fkhadra/react-toastify
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM3ODE1NTk2_size_16_color_FFFFFF_t_70 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/18/b55d971cf52c48f296211c9d9f9f1921.png