materialUi 沒有合適的 消息通知組件, 這里使用 Snackbar 和 Alert 開發一個
### 效果
### 完整代碼
ToastItem.tsx
```
import React from "react";
import { Snackbar, Alert } from '@mui/material';
export default (props: any) => {
const { content, duration=3000, type } = props;
// 開關控制：默認true,調用時會直接打開
const [open, setOpen] = React.useState(true);
// 關閉消息提示
const handleClose = () => {
setOpen(false);
};
return <Snackbar
open={open}
autoHideDuration={duration}
anchorOrigin={{ vertical: 'top', horizontal: 'center' }}
onClose={handleClose}>
<Alert onClose={handleClose} severity={type}>{content}</Alert>
</Snackbar>
}
```
index.tsx
```
import ToastItem from "./ToastItem";
import ReactDOM from "react-dom";
const Toast = {
dom: null,
success(content: any, duration?: any) {
// 創建一個dom
let dom = document.createElement('div');
// 定義組件，
const JSXdom = (<ToastItem content={content} duration={duration} type='success'/>);
// 渲染DOM
ReactDOM.render(JSXdom, dom)
// 置入到body節點下
document.body.appendChild(dom);
},
error(content: any, duration?: any) {
let dom = document.createElement('div');
const JSXdom = (<ToastItem content={content} duration={duration} type='error'/>);
ReactDOM.render(JSXdom, dom)
document.body.appendChild(dom);
},
warning(content: any, duration?: any) {
let dom = document.createElement('div');
const JSXdom = (<ToastItem content={content} duration={duration} type='warning'/>);
ReactDOM.render(JSXdom, dom)
document.body.appendChild(dom);
},
info(content: any, duration?: any) {
let dom = document.createElement('div');
const JSXdom = (<ToastItem content={content} duration={duration} type='info' />);
ReactDOM.render(JSXdom, dom)
document.body.appendChild(dom);
}
};
export default Toast;
```
### 使用
```
其他代碼省略
import Toast from "../Toast";
function onCopy () {
Toast.success("復制成功");
}
```
[參考的js 版本](https://blog.csdn.net/u012885136/article/details/122490041)
