自举模态不隐藏在反应中

Question

下面是模态部分。

console.log发生在(isPending ==“隐藏”)代码中，但是bsModal.hide()什么也不做。

如果我注释掉了bsModal.show()，这个模式就不再显示了，所以我知道这个部分可以工作。

我的应用程序中还有其他地方使用bsModal.hide()，但由于某种原因，它在这里不起作用。

有人有什么想法吗？

import { useEffect, useRef } from "react";

export const ProcessingModal = ({ isPending }) => {
    const modalRef = useRef();

    useEffect(() => {
        var myModal = modalRef.current;
        var bsModal = new bootstrap.Modal(myModal);

        if (isPending == "show") {
            bsModal.show();
        }
        if (isPending == "hide") {
            console.log("hide", bsModal);
            bsModal.hide();
        }
    }, [isPending]);

    return (
        <div
            className="modal fade"
            tabIndex="-1"
            aria-labelledby="processingModalLabel"
            aria-hidden="true"
            data-bs-backdrop="static"
            ref={modalRef}
        >
            <div className="modal-dialog modal-dialog-centered">
                <div className="modal-content">
                    <div className="modal-body d-flex align-items-center justify-content-center py-5">
                        <span
                            className="spinner-border spinner-border text-primary me-3 spinner-4"
                            role="status"
                            aria-hidden="true"
                        ></span>
                        <h4 className="mb-1">Processing Request...</h4>
                    </div>
                </div>
            </div>
        </div>
    );
};

Answer 1

如果您想用javascript控制类fade，请从Modal中删除它。

<div
    className="modal" // remove fade from here
    tabIndex="-1"
    aria-labelledby="processingModalLabel"
    aria-hidden="true"
    data-bs-backdrop="static"
    ref={modalRef} >
   .....

如果没有解决您的问题，请参见this answer。