我在 React 中使用门户网站。

看看这些代码片段。

// Layout.js
function DashboardLayout() {
    const [state, setState] = useState(0);

    console.log("Component rerendered");

    return (
        <>
            <button
                onClick={() => {
                    setState(state + 1);
                }}
            >
                change state
            </button>
            <div className="app-content content">
                <div className="content-wrapper">
                    <div className="content-header row"></div>
                </div>
            </div>
            <LoginModal />
        </>
    );
}

// LoginModal
function LoginModal() {
    return ReactDOM.createPortal(
        <>
            <div
                className="modal fade text-left show">
                <div className="modal-dialog modal-dialog-centered  modal-md">
                    <div className="modal-content">
                        <div className="modal-body">
                            <h1>something</h1>
                        </div>
                    </div>
                </div>
            </div>
        </>,
        document.querySelector("#overlays")
    );
}

一切正常，模态将正确显示。当我从浏览器检查器中手动删除模态元素时，问题就出现了。当单击更改状态按钮时，应该会导致重新渲染，并且应该再次渲染已删除的模式，但实际上该部分不会重新渲染。怎么了？