如何将 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 并使它们可以被标题访问。 这里有我不熟悉的 next.js 特定技巧吗？

Answer 1

这是一个带有上下文的完整示例（之前在这个其他答案中建议的方法通过稍微修改https://github.com/vercel/next.js/tree/7df7c5e80515eea6745fd59e54d87e5ee709fe0c/examples/with-app-layout在 Next.js 12.0.7 上测试和反应 17：

页面/_app.js

import React from 'react'

export const MyAppContext = React.createContext({
  n: 0,
  setN: undefined,
});

function Header(props) {
  return <div>n = { props.n }</div>
}

export default function App({ Component, pageProps }) {
  const [n, setN] = React.useState(0)
  return (
    <MyAppContext.Provider value={{n, setN}}>
      <Header n={n} />
      <Component {...pageProps} />
    </MyAppContext.Provider>
  )
}

页面/index.js

import { MyAppContext } from './_app.js'
import React from 'react'

export default function Home() {
  const {n, setN} = React.useContext(MyAppContext)
  setN(new Date().getTime())
  return <div>test</div>
}

如果它只取决于页面而不是道具

以下在没有上下文的情况下工作，我想知道设置这些属性是否会导致任何问题：

页面/_app.js

function Header(props) {
  return <div>n = { props.n }</div>
}

export default function App({ Component, pageProps }) {
  return (
    <>
      <Header n={Component.n} />
      <Component {...pageProps} />
    </>
  )
}

页面/index.js

export default function Home() {
  return <div>test</div>
}
Home.n = 1

Answer 2

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

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

第二种方式

• 在页面组件上创建状态
• 将 StatemodifierFunction 道具传递给 pageContent
• 然后通过调用这个 StatemodifierFunction 来修改状态
• 然后将此状态传递给 Header 组件

**第三种方式**

• 你也可以使用反应节点