如何将一个过渡 MUI 属性传递给我的 React 子组件?

huangapple go评论69阅读模式
英文:

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&lt;SlideProps, &#39;direction&#39;&gt;;
const TransitionLeft = (props: TransitionProps) =&gt; &lt;Slide {...props} direction=&quot;left&quot; /&gt;


export const Messages = () =&gt; {

  const [msgStatus, setMsgStatus] = useState(&quot;&quot;);     
  
  //NOTE: transition
  const [transition, setTransition] = useState&lt;React.ComponentType&lt;TransitionProps&gt; | undefined&gt;(undefined);

  const handleClick = (Transition: React.ComponentType&lt;TransitionProps&gt;) =&gt; () =&gt; {
    setTransition(() =&gt; Transition);
    setMsgStatus(&#39;info&#39;);
  };

  return (
    &lt;Stack&gt;
       &lt;Button
             onClick={handleClick(TransitionLeft)}
           &gt;
             open info
           &lt;/Button&gt;
           &lt;InfoMessage
             open={msgStatus === &#39;info&#39;}
             transition={transition}
             onClose={() =&gt; setMsgStatus(&#39;&#39;)}
           /&gt;
    &lt;/Stack&gt;
  )
}

child component

interface InfoMessageProps {
  open: boolean;
  onClose: () =&gt; void;
  transition: React.ElementType;
}

export const InfoMessage = ({ open, onClose, transition }: InfoMessageProps) =&gt; {

  const handleClose = (): void =&gt; {
    onClose();
  };

  return (
    &lt;Snackbar
      open={open}
      autoHideDuration={4000}
      anchorOrigin={{ vertical: &#39;top&#39;, horizontal: &#39;right&#39; }}
      onClose={handleClose}
      TransitionComponent={transition} // here I have an error
    &gt;
      &lt;Alert
        sx={{
              width: &#39;487px&#39;,
              height: &#39;104px&#39;,
              paddingTop: &#39;20px&#39;,
              paddingLeft: &#39;20px&#39;,
              backgroundColor: &#39;#FDFDFD&#39;,
        }}
        icon={false}
        action={(
          &lt;IconButton
            aria-label=&quot;close&quot;
            color=&quot;inherit&quot;
            size=&quot;small&quot;
          &gt;
            &lt;CloseIcon style={{ fontSize:&#39;24px&#39; }} /&gt;
          &lt;/IconButton&gt;
        )}
        onClose={handleClose}
      &gt;
        &lt;AlertTitle sx={{ paddingRight:&#39;80px&#39; }}&gt;
          &lt;Typography variant=&#39;headings.h4&#39;&gt;title&lt;/Typography&gt;
        &lt;/AlertTitle&gt;
        &lt;Typography variant=&#39;captions.default&#39;&gt;Insert message here&lt;/Typography&gt;
      &lt;/Alert&gt;
    &lt;/Snackbar&gt;
  );
};

答案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 &#39;@mui/material/Slide&#39;;

function SlideTransition(props: SlideProps) {
  return &lt;Slide {...props} direction=&quot;up&quot; /&gt;;
}

and then render pass it to Snackbar as TransitionComponent:

&lt;Snackbar
   open={state.open}
   onClose={handleClose}
   TransitionComponent={SlideTransition}
   message=&quot;I love snacks&quot;
   key={state.Transition.name}
/&gt;

huangapple
  • 本文由 发表于 2023年5月17日 17:52:31
  • 转载请务必保留本文链接:https://go.coder-hub.com/76270782.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定