当前位置：首页 > 文章列表 > 文章 > 前端 > 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 (
            <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 元素渲染到页面上，而不是作为一个组件来渲染，也是解决问题的关键。

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