reactjs - 为什么 react 元素在从 DOM 中删除后不再重新呈现

我在 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")
    );
}

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

回答1

这是正确的行为。如果您希望它们在用户删除它们后出现在页面上,则应该做一些额外的工作。它可能涉及 setInterval 并检查模态元素是否仍然存在,然后在 DOM 中设置它。

这不是一个简单的 React 用法,但很有可能。

相似文章

reactjs - 如何让一个组件显示在另一个组件中?

现在我必须执行以下操作:显示酒店列表包括每个酒店的地址和图像然后显示酒店中有哪些房间按容量过滤这些房间到目前为止,我可以很好地显示酒店的名称、地址和图像,并且可以根据他们的1-5评级过滤这些,但我已经...

最新文章