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;调用代码：
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>
);
}问题在于 messagebox 组件的渲染方式。原始代码中，messagebox 组件在 app 组件中被渲染为一个普通的子组件。 react bootstrap 的 modal 组件依赖于 react 的状态更新机制来触发动画。由于 messagebox 组件在每次状态改变时都会重新渲染，但组件本身并没有重新挂载，因此动画效果无法正常显示。
解决方案是将 messagebox 组件的渲染方式修改为如下：
修改后的 messagebox_hook.js 代码:
const messagebox = usememo(() => {
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>
);
});修改后的 app.js 代码:
return (
<div>
<h1>123</h1>
<Button onClick={() => show("标题", "123", "yesno")}>显示</Button>
<Button onClick={() => show("标题", "456", "ok")}>显示2</Button>
{MessageBox}
</div>
);通过使用 usememo hook，messagebox 组件仅在 showdialog, title, message 或 buttons 发生变化时才会重新渲染，避免了不必要的重新渲染，从而确保 react bootstrap 的 modal 组件可以正确地执行动画。 将 messagebox 直接作为 jsx 元素渲染到页面上，而不是作为一个组件来渲染，也是解决问题的关键。
