Next JS Layout 组件，将 props 传递给 children

Question

我找到了一个代码，它在更改页面时解决了 Next JS 重新渲染中的问题。但是现在我需要将道具发送到子组件。我不知道如何让它在这里工作，这是我的 layout.js 代码。如您所见，我可以将道具发送到 Header 组件，但对于儿童我不知道如何发送，因为它是一个变量而不是组件。

import Header from "../components/header";
import Footer from "../components/footer";
import { Fragment } from "react";

export default function Layout({ children, ...pageProps }) {
  return (
    <Fragment>
      <Header
        isRegisterPage={pageProps.isRegisterPage}
        isLoginPage={pageProps.isLoginPage}
        outHome={pageProps.outHome}
      />
      {children}
      <Footer />
    </Fragment>
  );
}

感谢您的帮助

Answer 1

你考虑过使用 React 的 Context API 吗？这个想法是，当使用 Context API 时，您的组件的状态会被提升，以便在全局范围内进行管理。如果组件需要道具，您可以简单地将组件包装在所谓的上下文提供程序中，而不是手动向下传递道具（道具钻探）。这将允许该组件访问应用程序的全局状态。这很好，因为当您的应用程序变得更大时，您可能需要通过许多组件传递 props，这可能会造成混乱并增加不必要的混乱。

React 提供了一些很棒的文档来设置你的 React 应用程序以使用 Context API。强烈建议您检查一下！

https://reactjs.org/docs/context.html