英文:
How can I pass a transition MUI prop to my child component in React?
问题
以下是您要翻译的内容:
Parent component:
//注意:过渡
type TransitionProps = Omit<SlideProps, 'direction'>;
const TransitionLeft = (props: TransitionProps) => <Slide {...props} direction="left" />;
export const Messages = () => {
const [msgStatus, setMsgStatus] = useState("");
//注意:过渡
const [transition, setTransition] = useState<React.ComponentType<TransitionProps> | undefined>(undefined);
const handleClick = (Transition: React.ComponentType<TransitionProps>) => () => {
setTransition(() => Transition);
setMsgStatus('info');
};
return (
<Stack>
<Button
onClick={handleClick(TransitionLeft)}
>
打开信息
</Button>
<InfoMessage
open={msgStatus === 'info'}
transition={transition}
onClose={() => setMsgStatus('')}
/>
</Stack>
)
}
Child component:
interface InfoMessageProps {
open: boolean;
onClose: () => void;
transition: React.ElementType;
}
export const InfoMessage = ({ open, onClose, transition }: InfoMessageProps) => {
const handleClose = (): void => {
onClose();
};
return (
<Snackbar
open={open}
autoHideDuration={4000}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
onClose={handleClose}
TransitionComponent={transition} // 这里我有一个错误
>
<Alert
sx={{
width: '487px',
height: '104px',
paddingTop: '20px',
paddingLeft: '20px',
backgroundColor: '#FDFDFD',
}}
icon={false}
action={(
<IconButton
aria-label="关闭"
color="inherit"
size="small"
>
<CloseIcon style={{ fontSize:'24px' }} />
</IconButton>
)}
onClose={handleClose}
>
<AlertTitle sx={{ paddingRight:'80px' }}>
<Typography variant='headings.h4'>标题</Typography>
</AlertTitle>
<Typography variant='captions.default'>在这里插入消息</Typography>
</Alert>
</Snackbar>
);
};
英文:
I have one parent component with a button. when I click it, it opens a snackBar from MUI (child component). My teacher told me to add a transition effect to the onClick so when I show the snackbar, it has a slide transition.
I've tried to adjust MUI slide transition code from here MUI transition but I don't know how to pass the prop to the child component, I get an error in TransitionComponent={transition}. Any suggestion to make this working?
Parent component:
//NOTE: transition
type TransitionProps = Omit<SlideProps, 'direction'>;
const TransitionLeft = (props: TransitionProps) => <Slide {...props} direction="left" />
export const Messages = () => {
const [msgStatus, setMsgStatus] = useState("");
//NOTE: transition
const [transition, setTransition] = useState<React.ComponentType<TransitionProps> | undefined>(undefined);
const handleClick = (Transition: React.ComponentType<TransitionProps>) => () => {
setTransition(() => Transition);
setMsgStatus('info');
};
return (
<Stack>
<Button
onClick={handleClick(TransitionLeft)}
>
open info
</Button>
<InfoMessage
open={msgStatus === 'info'}
transition={transition}
onClose={() => setMsgStatus('')}
/>
</Stack>
)
}
child component
interface InfoMessageProps {
open: boolean;
onClose: () => void;
transition: React.ElementType;
}
export const InfoMessage = ({ open, onClose, transition }: InfoMessageProps) => {
const handleClose = (): void => {
onClose();
};
return (
<Snackbar
open={open}
autoHideDuration={4000}
anchorOrigin={{ vertical: 'top', horizontal: 'right' }}
onClose={handleClose}
TransitionComponent={transition} // here I have an error
>
<Alert
sx={{
width: '487px',
height: '104px',
paddingTop: '20px',
paddingLeft: '20px',
backgroundColor: '#FDFDFD',
}}
icon={false}
action={(
<IconButton
aria-label="close"
color="inherit"
size="small"
>
<CloseIcon style={{ fontSize:'24px' }} />
</IconButton>
)}
onClose={handleClose}
>
<AlertTitle sx={{ paddingRight:'80px' }}>
<Typography variant='headings.h4'>title</Typography>
</AlertTitle>
<Typography variant='captions.default'>Insert message here</Typography>
</Alert>
</Snackbar>
);
};
答案1
得分: 1
你无需传递过渡效果,一旦Snackbar
被挂载(open={true}
),过渡效果将起作用。
如果你想要滑动过渡效果,只需定义它:
import Slide, { SlideProps } from '@mui/material/Slide';
function SlideTransition(props: SlideProps) {
return <Slide {...props} direction="up" />;
}
然后将其传递给Snackbar
作为TransitionComponent
:
<Snackbar
open={state.open}
onClose={handleClose}
TransitionComponent={SlideTransition}
message="我爱小吃"
key={state.Transition.name}
/>
英文:
you don't need to pass the transition, once the Snackbar
is mounted (open={true}
) the transtion will work
if you want slide transition just define it:
import Slide, { SlideProps } from '@mui/material/Slide';
function SlideTransition(props: SlideProps) {
return <Slide {...props} direction="up" />;
}
and then render pass it to Snackbar
as TransitionComponent
:
<Snackbar
open={state.open}
onClose={handleClose}
TransitionComponent={SlideTransition}
message="I love snacks"
key={state.Transition.name}
/>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论