在Nextjs中创建新门户时未定义文档

f2uvfpb9 于 2023-06-05 发布在其他

关注(0)|答案(3)|浏览(143)

在我的项目中，我想在页眉标签中分离菜单，在主标签中分离内容，在页脚标签_document.js文件中分离联系人等部分，为此，我创建了一个新的门户网站，但在我的Header.js文件中出现错误document is not defined。
我尝试在nextjs中创建新的门户，如下所示：

import React, { Fragment } from "react";
import ReactDOM from "react-dom";

import NavigationBar from "./NavigationBar";

import classes from "./header.module.css";

const Header = (props) => {
  return (
    <Fragment>
      {ReactDOM.createPortal(
        <NavigationBar>{props.children}</NavigationBar>,
        document.getElementById("header")
      )}
    </Fragment>
  );
};

export default Header;

我创建了_document.js：

import Document, { Html, Head, Main, NextScript } from "next/document";

class MyDocument extends Document {
  static async getInitialProps(ctx) {
    const initialProps = await Document.getInitialProps(ctx);
    return { ...initialProps };
  }

  render() {
    return (
      <Html lang="en" dir="ltr">
        <Head />
        <body>
          <header id="header"></header>
          <Main />
          <footer id="_footer"></footer>
          <div id="_modal"></div>
          <NextScript />
        </body>
      </Html>
    );
  }
}

export default MyDocument;

next.js

来源：https://stackoverflow.com/questions/70259136/document-is-not-defined-when-creating-new-portal-in-nextjs

3条答案

按热度按时间

nszi6y051#

抛出此错误是因为document仅在浏览器中可用，而在服务器上不可用。接下来js在服务器端执行这段代码，这就是为什么会抛出错误。
你可以将我们的代码 Package 在if语句中。如果你在控制台上检查窗口的类型，它将返回object。下面的代码说明了这一点：

if (typeof window === 'object') {
    // Check if document is finally loaded
}

赞(0）回复(0）举报 2023-06-05

qpgpyjmq2#

使用React portal maker：

import React from "react";
import reactDom from "react-dom";

const Header = (props) => {
  const content = <NavigationBar>{props.children}</NavigationBar>;

  if (typeof window === "object") {
    return reactDom.createPortal(content, document.getElementById("__header"));
  }

  return null;
};

export default Header ;

赞(0）回复(0）举报 2023-06-05

kb5ga3dv3#

另一个答案：

确保页面/文档已挂载/加载如下：

const Header = (props) => {

  // to detect document has been mounted
  const [documentMouned, setDocumentMounted] = useState(false);
  

  // run after document mounted
  useEffect(() => {
   setDocumentMounted(true)
}, []);
  return (
    <Fragment>
      {ReactDOM.createPortal(
        <NavigationBar>{props.children}</NavigationBar>,
        document.getElementById("header")
      )}
    </Fragment>
  );
};

赞(0）回复(0）举报 2023-06-05

我来回答

在Nextjs中创建新门户时未定义文档

3条答案

相关问题

热门标签

最新问答