ReactBootstrap模态框动画失效？巧解useMessageBoxHook动画难题

React Bootstrap模态框动画失效？本文针对使用自定义Hook `useMessageBox`的React Bootstrap消息框组件动画失效问题，提供详细的解决方案。 问题源于`Modal`组件的渲染优化，导致组件未重新渲染而无法触发动画效果。文章分析了原始代码中`useMemo`依赖项不完整的问题，并给出了修改后的代码，通过完善`useMemo`的依赖项(包含`showDialog`, `title`, `message`, `buttons`)以及在`Modal`组件中添加`onHide`和`closeButton`属性，最终成功解决了React Bootstrap模态框动画失效的难题，确保动画效果正常显示。 阅读本文，轻松解决React Bootstrap模态框动画失效的困扰。

React Bootstrap模态框动画失效的排查与修复

在使用React Bootstrap构建消息框组件时，模态框关闭动画失效是常见问题。本文分析一个基于自定义Hook useMessageBox的示例，解释动画缺失的原因并提供解决方案。

问题描述：

一个使用React和React Bootstrap构建的消息框组件，基于useMessageBox Hook封装。该组件包含一个Modal组件，用于显示消息框内容。然而，关闭消息框时动画效果缺失。

代码示例（原始代码）：

import React, { useState, createContext, useRef, useMemo } from "react";
import { Button, Modal } from "react-bootstrap";

function useMessageBox() {
    const [title, setTitle] = useState('');
    const [message, setMessage] = useState('');
    const [buttons, setButtons] = useState(null);
    const [showDialog, setShowDialog] = useState(false);
    const resolveRef = useRef(null);

    const handleResult = (result) => {
        resolveRef.current(result);
        setShowDialog(false);
    };

    const messageBox = useMemo(() => (
        <modal show="{showDialog}"><modal.header><modal.title>{title}</modal.title></modal.header><modal.body>{message}</modal.body><modal.footer>{buttons}</modal.footer></modal>
    ), [showDialog, title, message, buttons]);

    const show = (title, message, type) => {
        setTitle(title);
        setMessage(message);
        if (type === 'ok') {
            setButtons(<button onclick="{()"> handleResult('ok')}>确定</button>);
        } else if (type === 'yesno') {
            setButtons(
                <>
                    <button onclick="{()"> handleResult('cancel')}>取消</button>
                    <button onclick="{()"> handleResult('confirm')}>确定</button>
                </>
            );
        }
        setShowDialog(true);
        return new Promise((resolve) => {
            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>
  );
}

问题分析与解决方案：

问题根源在于Modal组件的渲染优化。React Bootstrap的动画依赖于组件的挂载和卸载。如果组件没有重新渲染，动画就不会触发。 原始代码中，messageBox组件没有正确地依赖于showDialog状态的变化。

修改后的代码：

(注意：原始代码已经使用了useMemo，但依赖项不完整。以下代码修正了依赖项)

// messagebox_hook.js (修改后的代码)
import React, { useState, useRef, useMemo } from "react";
import { Button, Modal } from "react-bootstrap";

// ... (其余代码不变，handleResult, show 函数保持不变)

const messageBox = useMemo(() => (
    <modal show="{showDialog}" onhide="{()"> setShowDialog(false)}> {/* 添加onHide*/}
        <modal.header closebutton> {/* 添加closeButton*/}
            <modal.title>{title}</modal.title></modal.header><modal.body>{message}</modal.body><modal.footer>{buttons}</modal.footer></modal>
), [showDialog, title, message, buttons]);

// ... (其余代码不变)

通过在useMemo中包含showDialog, title, message, buttons作为依赖项，确保messageBox组件在这些值发生变化时重新渲染，从而触发React Bootstrap的动画效果。 此外，添加了onHide和closeButton属性到Modal组件，确保动画能够正常工作。

通过以上修改，模态框的动画效果就能正常显示。 关键在于确保Modal组件在状态改变时正确地重新渲染。

以上就是《ReactBootstrap模态框动画失效？巧解useMessageBoxHook动画难题》的详细内容，更多关于的资料请关注golang学习网公众号！