react全局弹窗

最新推荐文章于 2024-06-14 09:33:25 发布

qq_40414209

最新推荐文章于 2024-06-14 09:33:25 发布

阅读量660

点赞数

分类专栏： react

本文链接：https://blog.csdn.net/qq_40414209/article/details/106172776

版权

react 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

import React from 'react';
import ReactDOM from 'react-dom';
import { Snackbar } from '@material-ui/core';
import { Alert ,Color} from "@material-ui/lab";



export default function DialogAlert(msg:string = "",duration:number=1500,type:Color = "error"){
    if(msg === "") return
    let open = true;
    let div = document.createElement('div');
    const root =  document.getElementById("root");
    root?.appendChild(div)

    ReactDOM.render((
        <Snackbar open={open} autoHideDuration={duration} >
        <Alert severity={type}>
          {msg}
        </Alert>
      </Snackbar>
    ) ,div); //返回实例 
    const removeDiglog = ()=>{
        root?.removeChild(div)
    }
    setTimeout(removeDiglog,duration)
};