当前位置：首页 > 文章列表 > 文章 > 前端 > ReactBootstrap模态框动画消失？自定义Hook封装的消息框组件动画失效解决方案

ReactBootstrap模态框动画消失？自定义Hook封装的消息框组件动画失效解决方案

2025-04-01 11:18:26 0浏览收藏

本文解决React Bootstrap模态框动画在自定义Hook封装的消息框组件中失效的问题。由于React Bootstrap的Modal组件依赖React状态更新机制触发动画，而原始代码中消息框组件每次状态改变都重新渲染，导致动画无法正常显示。文章通过使用`useMemo` Hook优化组件渲染，使其仅在必要时重新渲染，并直接将组件作为JSX元素渲染，最终解决了动画失效问题，实现了React Bootstrap模态框的正常动画效果。关键词：React Bootstrap, 模态框, 动画, 自定义Hook, useMemo, 组件渲染

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(
                
            );
        }
        else if (type === 'yesno') {
            setbuttons(
                <>
                    
                    
                
            )
        }

        setshowdialog(true);

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

    return [messagebox, show];
}

export default usemessagebox;

调用代码：

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

  return (
    
      123
      
      
      
    
  );
}

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

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

修改后的 messagebox_hook.js 代码:

const messagebox = usememo(() => {
  return (
    
      
        
          {title}
        
        {message}
        {buttons}
      
    
  );
});

修改后的 app.js 代码:

return (
  
    123
    
    
    {MessageBox}
  
);

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

好了，本文到此结束，带大家了解了《ReactBootstrap模态框动画消失？自定义Hook封装的消息框组件动画失效解决方案》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！