似乎以前没有为Next.js询问过这个问题，有些谷歌搜索并没有真正提供答案。专门针对React提出了要求，但在Next.js框架中，我认为我一直使用的解决方案不起作用。
我的应用程序基本上是一家商店，并且在包装应用程序的布局组件中有一个导航菜单。在“布局”组件中有一个“篮子”项目（显示项目数），然后有一个“详细信息”组件页面，从中可以向篮子中添加项目。
我很欣赏这可能与使用React（特别是Next.js）的范例相反，但是过去我已经解决了一个孩子（必须在React和React-Router中）更新父状态的问题通过一个孩子的道具传递函数处理程序。对于简单的应用程序，这通常可以帮助我解决问题，并迅速解决问题。
在下一个JS中，由于我从未专门初始化子组件（“ Detatils”页面），如何调用父组件的功能（“布局”，它包装了整个应用程序）？
如果不使用服务器端状态和/或redux，这是不可能的吗？
function MyApp({ Component, pageProps }) {
return (
<Layout> {*this contains the basket icon with the number of items*}
<Component {...pageProps} />
</Layout>
)
}
export default MyApp
更新
我最终使用React的useContext钩子来做到这一点，将变量函数处理程序注册到全局应用程序上下文中。我不确定这是否是反模式或正在破坏使用Netx.js的意义...。我们将看到...
答案 0 :(得分：0)
如果不使用服务器端状态或Layout，似乎无法从特定page的{{1}}组件中获取功能。
基本上，如果您想同时在redux和特定的Layout中执行函数，我认为正确的方法是将函数移出page和{{1 }}。结果，在Layout中定义函数。
page但是，我认为在_app.js中定义全局函数并使用function MyApp({ Component, pageProps }) {
function layoutFn() {
console.log('Execute layoutFn')
}
return (
<Layout layoutFn={layoutFn}>
<Component {...pageProps, layoutFn} />
</Layout>
)
}
export default MyApp
在redux或Layout中执行全局函数更为合理。