如何在 React 中使用 TransitionComponent-Bootstrap

Question

我想为 ToastContainer 设置 transition props 以使用 Toast 通知的过渡动画。

transition 应该是 TransitionComponent。

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 导入 TransitionComponent，其中包括 Collapse and Fade, or from the underlying package react-transition-group。您将整个组件传递给 ToastContainer。如果不包含 transition 道具，则默认为 Fade.

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

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

如何在 React 中使用 TransitionComponent-Bootstrap

How to use TransitionComponent in React-Bootstrap

reactjs

typescript

transition

react-bootstrap

toast