在我的项目中，我想在标题标签中分隔部分，例如标题标签中的菜单、主标签中的内容和页脚标签中的联系人 _document.js 文件，为此我创建了一个新门户，但出现错误文档未在我的 。Header.js 文件中定义
我尝试像这样在 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;
最佳答案
错误被抛出是因为document 只在浏览器内可用，在服务器上不可用。接下来 js 在服务器端执行此代码，这就是抛出错误的原因。
您可以将我们的代码包装在 if 语句中。如果您在控制台上检查它返回对象的窗口类型。以下代码说明了这一点:
if (typeof window === 'object') {
// Check if document is finally loaded
}
关于reactjs - 在 Nextjs 中创建新门户时未定义文档，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/70259136/