javascript - 接下来的 JS Layout 组件，将 props 传递给 child

Question

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

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 时，您的组件的状态会被提升，以便在全局范围内进行管理。如果组件需要 Prop ，您可以简单地将组件包装在所谓的上下文提供程序中，而不是手动向下传递 Prop ( Prop 钻探)。这将允许该组件访问应用程序的全局状态。这很好，因为当您的应用程序变得更大时，您可能需要通过许多组件传递 props，这可能会造成困惑并增加不必要的困惑。

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

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