在React中的函数中显示渲染之外的通知

编程问答 2022-08-15

问题描述

我是React的新手，我创建了一个登录页面，我想使用通知来显示错误的用户/密码等错误...我创建了一个通知组件，这是我的Notification组件

import React from 'react';
import Style from './notifications.css';
import { Container } from 'react-bootstrap';


class Notifications extends React.Component{
  constructor(props){
    super(props);
    this.state={
      top: -100,errorText: '',};
  }

  onShow = () => {

  }

  showNotification= () => {
    this.setState({
      top: 16,},() => {
      setTimeout(() => {
        this.setState({
          top: -100,});
      },3000);
    });
  }

  render(){
    return(
        <React.Fragment>
          <Container top={this.state.top}>{this.state.errorText}</Container>
        </React.Fragment>
    );
  }
}

export default Notifications;

我想在我的app.js中使用此组件 这是我的app.js 

import React from 'react';
import Notifications from './Notifications/notifications';

showNatify = (errorText) => {
  <Notifications errorText={errorText} ></Notifications>

  submitFunAjax = () => {
    if (this.checkForSubmit() === true) {
      // Some Codes
    }

    Tools.Fetch(this,"Authentication.asmx/LoginToSystem",myParams,function (sender,response) {
      if (response[0] === "true") {
        //use my component for success
      }
      else if (response[0] === "false") {
        // use my component for danger
      }
    })
  }
}

解决方法

我建议您使用React Toastify软件包。这非常易于使用，您可以根据需要轻松进行配置。

要安装，请运行：

npm install --save react-toastify

这是有关如何使用它的简单演示。

 import React from 'react';
 
  import { ToastContainer,toast } from 'react-toastify';
  import 'react-toastify/dist/ReactToastify.css';
  
  function App(){
    const notify = () => toast("Wow so easy !");
 
    return (
      <div>
        <button onClick={notify}>Notify !</button>
        <ToastContainer />
      </div>
    );
  }

这里是Live Demo。 希望这可以帮助！！祝您编码愉快！

javascriptnativenativereactjsreactjs