onExit 不适用于材质 ui 转换

Question

我有一个小吃栏组件：

const handleExited = () => {
  console.log('exit');
};

const slideTransition = (props) => {
    return <Slide {...props} direction='right' onEntered={handleExited} onExited={handleExited} />;
  };


return (
  <div>
    <Snackbar
      open={open}
      autoHideDuration={3000}
      onClose={handleClose}
      TransitionComponent={slideTransition}
    >
      <div>
        <AlertWrapper severity={snackbarVar()[0]?.severity}>
          {snackbarVar()[0]?.message}
        </AlertWrapper>
      </div>
    </Snackbar>
  </div>
);

当应用程序上显示小吃栏时，会通过

handleExited

调用

onEntered

方法，但是当小吃栏被移除时，不会通过

handExited

调用

onExited

方法。

为什么

onEntered

有效，而

onExited

不起作用？

Answer 1

删除

TransitionComponent

并添加

TransitionProps

。

<Snackbar
  TransitionProps={{ onEntered: handleExited, onExited: handleExited }}
>

Answer 2

虽然 @Hamidreza 的回答让我走上了正轨，但

TransitionProps

在 MUI 7 中已被弃用，取而代之的是

slotProps.transition

，因此请使用此表单：

<Snackbar
  slotProps={{transition: { onEntered: handleExited, onExited: handleExited }}}
>