使用NextJS从页面(子)组件调用布局(父)组件函数

Question

Next.js以前似乎没有人问过这个问题，一些谷歌搜索并没有真正提供答案。这是专门针对React提出的，但在Next.js框架中，我认为我一直使用的解决方案不会起作用。

我的应用程序基本上是一个商店，在包装应用程序的布局组件中有一个导航菜单。布局组件中有一个篮子项目(显示项目数量(，然后我有一个详细信息组件页面，我可以从中向篮子中添加项目。

我理解这可能会违反使用React(尤其是(Next.js的模式，但在过去，我已经解决了孩子必须通过孩子的道具传递函数处理程序来更新父级状态的问题(在React和React Router中(。对于简单的应用程序，这通常对我来说很有用，并很快解决了问题。

在下一个JS中，由于我从未专门初始化过子组件(Detatils页面(，我如何调用父组件的函数(Layout，它包装了我的整个应用程序(？

如果不使用服务器端状态和/或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的意义……我们拭目以待。。。

Answer 1

如果不使用服务器端状态或redux，似乎无法从特定page中的Layout组件获取函数。

基本上，如果您想在Layout和特定的page中执行函数，我认为正确的方法是将函数移出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中定义全局函数，并使用dispatch在Layout或page中执行它更合理。