Блог

Я хотел бы установить реквизиты перехода для ToastContainer, чтобы использовать анимацию перехода для всплывающего уведомления.

переход должен быть TransitionComponent .

TransitionComponent выглядит следующим образом;

 export declare type TransitionComponent = React.ComponentType<{
    in?: boolean;
    appear?: boolean;
} amp; 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?

Любые предложения были бы полезны! Спасибо!!

Вы можете получить определение typescript, включив

 import {TransitionComponent} from "react-bootstrap";
  

Чтобы использовать переход, похоже, что вы импортируете TransitionComponent либо из react-bootstrap, который включает в себя Collapse и Fade , либо из базового пакета react-transition-group . Вы передаете весь компонент ToastContainer . Если transition prop не включен, по умолчанию Fade используется значение .

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

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