我想使用React Portal创建一个模态，所以这里我为模态数据创建了一个showModal容器，一个我们可以用来控制模态的Modal容器，在index.html中，我想要一个myPortalModal类的包装器，通过它我必须向整个应用程序显示模态，并为模态视图提供一些 CSS。我的疑问是，如果我想点击点击按钮，它会抛出错误“目标容器不是 DOM 元素”。那么如何解决问题并使用包装器模态组件来处理整个应用程序，这里的代码在index.html下面给出，所以如果需要对代码进行任何修改，请这样做，以及为什么会发生这个错误，即使我做了所有的事情正确的事情。
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div id="root"></div>
<div class="myPortalModal"></div>
</body>
</html>
并显示模态容器代码
import React from "react";
import ReactDOM from 'react-dom';
export default function ShowModal({closeModal}) {
return ReactDOM.createPortal(
<>
<div className="modal-wrapper" onClick={closeModal}></div>
<div className="modal-container">
<h1>Heading</h1>
<p>this is a modal , pls click close</p>
<button onClick={closeModal}>Close</button>
</div>
</>,
document.querySelector('.myPortalModal')
);
}
模态容器代码
import React, { useState } from "react";
import ShowModal from "./ShowModal";
export default function Modal() {
const [showModal, setShowModal] = useState(false);
const closeModal = () => setShowModal(false);
return (
<>
<button onClick={() => setShowModal(true)}>Click</button>
{showModal && <ShowModal closeModal={closeModal} />}
</>
);
}
Modal 被导入到 App 组件中
你改成返回jsx
export default function ShowModal({closeModal}) {
return <> {ReactDOM.createPortal(
<>
<div className="modal-wrapper" onClick={closeModal}></div>
<div className="modal-container">
<h1>Heading</h1>
<p>this is a modal , pls click close</p>
<button onClick={closeModal}>Close</button>
</div>
</>,
document.querySelector('.myPortalModal')
)} </>
}