React Bootstrap模态框动画消失：如何解决自定义Hook封装的消息框组件动画失效问题？

react bootstrap 模态框动画消失的调试

本文将讨论一个使用 react bootstrap 构建模态框组件时遇到的问题：关闭动画缺失。问题源于一个基于 react hooks 封装的消息框组件，该组件在关闭时没有呈现预期的动画效果。

问题代码如下：

import react from "react";import { usestate, createcontext, useref } from "react";import { button, modal } from "react-bootstrap";function usemessagebox() {    let [title, settitle] = usestate('');    let [message, setmessage] = usestate('');    let [buttons, setbuttons] = usestate(null);    let [showdialog, setshowdialog] = usestate(false);    let resolveref = useref(null);    const handleresult = (result) => {        console.log(result);        resolveref.current(result);        setshowdialog(false);    };    const messagebox = () => {        return (            <div>                <modal show={showdialog}>                    <modal.header>                        <modal.title>{title}</modal.title>                    </modal.header>                    <modal.body>{message}</modal.body>                    <modal.footer>                        {buttons}                    </modal.footer>                </modal>            </div>        );    };    const show = (title, message, type) => {        settitle(title);        setmessage(message);        if (type === 'ok') {            setbuttons(                <button variant="primary" onclick={() => handleresult('ok')}>确定</button>            );        }        else if (type === 'yesno') {            setbuttons(                <>                    <button variant="secondary" onclick={() => handleresult('confirm')}>取消</button>                    <button variant="primary" onclick={() => handleresult('cancel')}>确定</button>                </>            )        }        setshowdialog(true);        return new promise((resolve, reject) => {            resolveref.current = resolve;        });    };    return [messagebox, show];}export default usemessagebox;

登录后复制