标签导航：

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;

调用代码：

function App() {
  const [messageBox, show] = useMessageBox();

  return (
    <div>
      <h1>123</h1>
      <Button onClick={() => show("标题", "123", "yesno")}>显示</Button>
      <Button onClick={() => show("标题", "456", "ok")}>显示2</Button>
      {messageBox}
    </div>
  );
}

问题分析与解决方案：

问题根源在于Modal组件的渲染优化。React Bootstrap的动画依赖于组件的挂载和卸载。如果组件没有重新渲染，动画就不会触发。 原始代码中，messageBox组件没有正确地依赖于showDialog状态的变化。

修改后的代码：

(注意：原始代码已经使用了useMemo，但依赖项不完整。以下代码修正了依赖项)

// messagebox_hook.js (修改后的代码)
import React, { useState, useRef, useMemo } from "react";
import { Button, Modal } from "react-bootstrap";

// ... (其余代码不变，handleResult, show 函数保持不变)

const messageBox = useMemo(() => (
    <Modal show={showDialog} onHide={() => setShowDialog(false)}> {/* 添加onHide*/}
        <Modal.Header closeButton> {/* 添加closeButton*/}
            <Modal.Title>{title}</Modal.Title>
        </Modal.Header>
        <Modal.Body>{message}</Modal.Body>
        <Modal.Footer>{buttons}</Modal.Footer>
    </Modal>
), [showDialog, title, message, buttons]);

// ... (其余代码不变)

通过在useMemo中包含showDialog, title, message, buttons作为依赖项，确保messageBox组件在这些值发生变化时重新渲染，从而触发React Bootstrap的动画效果。 此外，添加了onHide和closeButton属性到Modal组件，确保动画能够正常工作。

通过以上修改，模态框的动画效果就能正常显示。 关键在于确保Modal组件在状态改变时正确地重新渲染。