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 (
            

                
                    
                        {title}
                    
                    {message}
                    
                        {buttons}
                    
                
            
        );
    };

    const show = (title, message, type) => {
        settitle(title);
        setmessage(message);
        if (type === 'ok') {
            setbuttons(
                 handleresult('ok')}>确定
            );
        }
        else if (type === 'yesno') {
            setbuttons(
                <>
                     handleresult('confirm')}>取消
                     handleresult('cancel')}>确定
                
            )
        }

        setshowdialog(true);

        return new promise((resolve, reject) => {
            resolveref.current = resolve;
        });
    };

    return [messagebox, show];
}

export default usemessagebox;

调用代码：

function app() {
  const [messagebox, show] = usemessagebox();

  return (
    

      
123
       show("标题", "123", "yesno")}>显示
       show("标题", "456", "ok")}>显示2
      
    
  );
}

问题在于 messagebox 组件的渲染方式。原始代码中，messagebox 组件在 app 组件中被渲染为一个普通的子组件。 react bootstrap 的 modal 组件依赖于 react 的状态更新机制来触发动画。由于 messagebox 组件在每次状态改变时都会重新渲染，但组件本身并没有重新挂载，因此动画效果无法正常显示。

解决方案是将 messagebox 组件的渲染方式修改为如下：

Digram

让Figma更好用的AI神器

下载

修改后的 messagebox_hook.js 代码:

const messagebox = usememo(() => {
  return (
    

      
        
          {title}
        
        {message}
        {buttons}
      
    
  );
});

修改后的 app.js 代码:

return (
  

    
123
     show("标题", "123", "yesno")}>显示
     show("标题", "456", "ok")}>显示2
    {MessageBox}
  
);

通过使用 usememo hook，messagebox 组件仅在 showdialog, title, message 或 buttons 发生变化时才会重新渲染，避免了不必要的重新渲染，从而确保 react bootstrap 的 modal 组件可以正确地执行动画。 将 messagebox 直接作为 jsx 元素渲染到页面上，而不是作为一个组件来渲染，也是解决问题的关键。