个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-12-05 02:36:24 24 4
gpt4 key购买 nike

在我的项目中，我想在标题标签中分隔部分，例如标题标签中的菜单、主标签中的内容和页脚标签中的联系人 _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/

24 4 0
文章推荐： sql - 根据另一个列的值将一个 sql 列拆分为两个
文章推荐： javascript - 如何在 vue3 应用程序(vscode)中配置 Stylelint 以在保存时进行 lint
文章推荐： azure-functions - OpenApiExample 未显示在 swagger UI 中
文章推荐： ansible - 如何检查文件列表的大小
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com