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组件在状态改变时正确地重新渲染。
