reactjs - NextJS 中的 createPortal

Question

我正在尝试创建一个模式，以便在验证并提交表单时，会出现一条感谢消息。该项目设置为 Typescript 应用程序，但我大部分时间都在使用 react.. 需要学习 typescript.. 我已经完成了以下步骤-

1. _document.js 文件添加了一个 id 为“modal-overaly:
2. 在我的联系表单组件中，我导入 Modal 组件并在发送表单后传递状态。
3. 在 Modal 组件中我导入 createPortal- 我创建了一个名为 portalElement = document.getElementById("modal-overlay"); 的变量；
4. 如果 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;

标签： reactjsnext.jsreact-portal