首先祝你们大家圣诞快乐!
[React+类型脚本]
是的,我是react的新手,我更像是后端极客,但我们都需要学习新东西:)
我正在尝试让我的snackbar在所有组件中全局工作,而不是每次都写一个新的。
我以前看过一个关于这个的帖子:How to implement material-ui Snackbar as a global function?
但不幸的是我不能让它工作。
我的函数是否正确?如果正确,我现在如何从另一个组件调用它?
我做了这个函数:
SnackbarHOC.tsx
'
import { AlertTitle, IconButton, Snackbar } from '@mui/material';
import Slide from '@mui/material';
import Alert from '@mui/material';
import { useState } from 'react';
import CloseIcon from '@mui/icons-material/Close';
function SnackbarHOC<T>(WrappedComponent: React.ComponentType<T>, Alert: React.ElementType) {
const [open, setOpen] = useState(false);
const [message, setMessage] = useState("I'm a custom snackbar");
const [duration, setDuration] = useState(2000);
const [severity, setSeverity] = useState(
"success"
); /** error | warning | info */
return (props: T) => {
const showMessage = (message: string, severity = "success", duration = 2000) => {
setMessage(message);
setSeverity(severity);
setDuration(duration);
setOpen(true);
};
const handleClose = (event: React.SyntheticEvent | Event, reason?: string) => {
if (reason === 'clickaway') {
return;
}
}
return (
<>
<WrappedComponent {...props} snackbarShowMessage={showMessage} />
<Snackbar
anchorOrigin={{
vertical: "bottom",
horizontal: "center"
}}
autoHideDuration={duration}
open={open}
onClose={handleClose}
//TransitionComponent={Slide}
>
<Alert severity="error"
sx={{ width: '100%' }}
action={
<IconButton
aria-label="close"
color="inherit"
size="small"
onClick={handleClose}>
<CloseIcon fontSize="inherit" />
</IconButton>
}>
{message}
</Alert>
</Snackbar>
</>
);
};
};
export default SnackbarHOC;
'
我试着从另一个组件调用它,但我现在不知道如何显示实际的snackbar:(。
这是所有没有给我的错误现在:
'
import SnackbarHOC from '../../SnackbarHOC';
'
1条答案
按热度按时间gudnpqoy1#
我找到了一个解决方案,但在JS中基本上是一样的,我猜只是没有类型化。我正在NEXTJS中实现最新的
现在我们只需要创建一个自定义组件,其中包含多个lil组件,我们可以根据需要进行编辑!
但是如果你真的想使用类型化的值,你可以在你的VSCode中检查每个变量和函数的返回类型,但是我真的看不出这有什么好处,但是因为它不会改变结果,所以我也不会在这里实现它。
我强烈推荐观看这个视频系列https://www.youtube.com/watch?v=Roxf91mp3kw&t=367s