如何在 React-Bootstrap 中使用 TransitionComponent

Question

我想為 ToastContainer 設置過渡道具以將過渡動畫用於 Toast 通知。

過渡應該是過渡組件。

TransitionComponent 看起來像這樣；

export declare type TransitionComponent = React.ComponentType<{
    in?: boolean;
    appear?: boolean;
} & TransitionCallbacks>;
export declare type TransitionType = boolean | TransitionComponent;

我想設置如下過渡；

export const Toast = ({ message, onClose }: Props) => {
  const messageRef = useRef<{
    head: string;
    body: string;
    detail?: string;
  }>({ head: "", body: "" });

  if (message) {
    messageRef.current = message;
  }

  return (
    <ToastContainer onClose={onClose} show={!!message} delay={7000} animation transition={transition}>
      <ToastHead>
        <strong className="mr-auto">{messageRef.current.head}</strong>
        <small>{messageRef.current?.detail}</small>
      </ToastHead>
      <ToastBody>{messageRef.current.body}</ToastBody>
    </ToastContainer>
  );
};

問題 1：如何定義過渡？

問題 2：如何在 JSX 中編寫轉換？

任何的意見都將會有幫助！ 謝謝！！

Answer 1

您可以通過包括獲得打字稿定義

import {TransitionComponent} from "react-bootstrap";

要使用過渡，看起來您從 react-bootstrap（包括Collapse和Fade ）或從基礎包react-transition-group導入TransitionComponent 。 您將整個組件傳遞給ToastContainer 。 如果不包含transition道具，則默認為Fade 。

import {Collapse, Toast as ToastContainer} from "react-bootstrap";

<ToastContainer onClose={onClose} show={!!message} delay={7000} animation transition={Collapse}>