我正在尝试创建一个模式,以便在验证并提交表单时,会出现一条感谢消息。该项目设置为 Typescript 应用程序,但我大部分时间都在使用 react.. 需要学习 typescript.. 我已经完成了以下步骤-
- _document.js 文件添加了一个 id 为“modal-overaly:
- 在我的联系表单组件中,我导入 Modal 组件并在发送表单后传递状态。
- 在 Modal 组件中我导入 createPortal- 我创建了一个名为 portalElement = document.getElementById("modal-overlay"); 的变量;
- 如果 showModal 我返回?createPortal(modalContent, portalElememt) : null;
我收到一个错误,说引用错误:未定义文档。
我不确定出了什么问题。非常感谢任何提示!
--Document file--
<div id="modal-overlay"></div>
--Modal Component--
import { createPortal } from "react-dom";
const Modal = (props) => {
const { showModal } = props.show;
const portalElement = document.getElementById("modal-overlay");
const modalContent = () => {
return (
<div>
<h1>
Thank you for your inquire! We have receieved your message! Demelo
Dining is ready to serve your upcoming event.{" "}
</h1>
</div>
);
};
return showModal ? createPortal(modalContent, portalElement) : null;
};
export default Modal;