如何将 next.js 中的 pageProps 从子组件传递到 _app.js？

Question

我正在开发 next.js 应用程序，我的页面布局遵循以下层次结构：

  _app.js
     Page.js
         Header.js
         PageContent.js

我需要在不使用 redux 的情况下将一些参数从 PageContent 传递到 Header。

在 _app.js 里面我有以下内容：

class Main extends App {
  render() {
  const {
    Component,
    pageProps,
    apollo,
    router: { route }
  } = this.props;

 return (
  <ApolloProvider client={apollo}>
      <Page
        pathname={route.split("/")[1]}
        {...pageProps}
        localLinks={Component.LocalLinks}
        render={props => <Component {...props} />}
      />
   </ApolloProvider>
  );
 }
}

我假设应该有一种方法可以将一些 propse (pageProps) 从 PageContent 传递到 _app 并将其传递到 Page 并使它们可以访问 header。这里有我不熟悉的 next.js 特定技巧吗？

Answer 1

您可以使用上下文 api 或父容器状态（此处为页面组件）。

第一种方法 -> 使用上下文 api

第二种方式

• 在页面组件上制作状态
• 将 StatemodifierFunction 属性传递给 pageContent
• 然后通过调用 StatemodifierFunction 修改状态
• 然后将此状态传递给标头组件

** 第三条路 **

• 你也可以使用反应节点