React Bootstrap模态框动画消失：如何解决自定义Hook封装的消息框组件动画失效问题？-js教程-PHP中文网

React Bootstrap模态框动画消失：如何解决自定义Hook封装的消息框组件动画失效问题？

聖光之護

发布： 2025-03-08 10:06:18

原创

680人浏览过

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 组件的渲染方式修改为如下：

稿定抠图

AI自动消除图片背景

查看详情

修改后的 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 元素渲染到页面上，而不是作为一个组件来渲染，也是解决问题的关键。

以上就是React Bootstrap模态框动画消失：如何解决自定义Hook封装的消息框组件动画失效问题？的详细内容，更多请关注php中文网其它相关文章！