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

【问题标题】：How to pass pageProps in next.js from a child component to _app.js?如何将 next.js 中的 pageProps 从子组件传递给 _app.js？
【发布时间】：2020-04-27 16:18:57
【问题描述】：

我正在开发一个 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 特定技巧吗？

【问题讨论】：

我对 next.js 不熟悉，但是在 React 中你可以直接提升状态，这样你的孩子就可以修改那些可以在兄弟组件之间共享的道具：reactjs.org/docs/lifting-state-up.html

标签： javascript reactjs next.js

【解决方案1】：

这是一个包含上下文的完整示例（之前建议的方法 in this other answer，通过稍微修改在 Next.js 12.0.7 和 React 17 上测试的 https://github.com/vercel/next.js/tree/7df7c5e80515eea6745fd59e54d87e5ee709fe0c/examples/with-app-layout：

pages/_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>
  )
}

pages/index.js

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

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

package.json

{
  "name": "with-app-layout",
  "version": "1.0.0",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "12.0.7",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "license": "MIT"
}

并运行：

npm install
npm run dev

useEffect 是必填项，否则会报错：

在渲染不同的组件（`Home`）时无法更新组件（`App`）

在：Cannot update a component while rendering a different component warning 中提到基本上你不能直接从render 调用.set 方法。

如果它只依赖于页面而不依赖于道具

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

pages/_app.js

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

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

pages/index.js

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

【讨论】：

【解决方案2】：

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

第一路 -> 使用上下文 api

第二种方式

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

** 第三种方式 **

你也可以使用 react 节点

【讨论】：