React Bootstrap模态框动画消失：如何解决useMessageBox Hook中动画失效的问题？

React Bootstrap模态框动画失效的排查与修复

在使用React Bootstrap构建消息框组件时，模态框关闭动画失效是常见问题。本文分析一个基于自定义Hook useMessageBox的示例，解释动画缺失的原因并提供解决方案。

问题描述：

一个使用React和React Bootstrap构建的消息框组件，基于useMessageBox Hook封装。该组件包含一个Modal组件，用于显示消息框内容。然而，关闭消息框时动画效果缺失。

代码示例（原始代码）：

import React, { useState, createContext, useRef, useMemo } from "react";import { Button, Modal } from "react-bootstrap";function useMessageBox() {    const [title, setTitle] = useState('');    const [message, setMessage] = useState('');    const [buttons, setButtons] = useState(null);    const [showDialog, setShowDialog] = useState(false);    const resolveRef = useRef(null);    const handleResult = (result) => {        resolveRef.current(result);        setShowDialog(false);    };    const messageBox = useMemo(() => (        <Modal show={showDialog}>            <Modal.Header>                <Modal.Title>{title}</Modal.Title>            </Modal.Header>            <Modal.Body>{message}</Modal.Body>            <Modal.Footer>{buttons}</Modal.Footer>        </Modal>    ), [showDialog, title, message, buttons]);    const show = (title, message, type) => {        setTitle(title);        setMessage(message);        if (type === 'ok') {            setButtons(<Button onClick={() => handleResult('ok')}>确定</Button>);        } else if (type === 'yesno') {            setButtons(                <>                    <Button onClick={() => handleResult('cancel')}>取消</Button>                    <Button onClick={() => handleResult('confirm')}>确定</Button>                </>            );        }        setShowDialog(true);        return new Promise((resolve) => {            resolveRef.current = resolve;        });    };    return [messageBox, show];}export default useMessageBox;

登录后复制