Javascript 使用NextJS从页面（子）组件调用布局（父）组件函数

这个问题似乎在Next.js之前没有被问过，一些谷歌搜索也没有给出答案。它是专门为React而设计的，但在Next.js框架中，我认为我一直使用的解决方案不起作用

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

我知道这可能与使用React（尤其是）Next.js的范例背道而驰，但在过去，我已经解决了一个问题（在React和React路由器中），即子节点必须通过子节点的道具传递函数处理程序来更新父节点的状态。对于简单的应用程序，这通常对我很有用，并且很快解决了问题

在下一个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

函数MyApp（{Component，pageProps}）{
返回(
{*其中包含带有项数的篮子图标*}
)
}
导出默认MyApp

更新

---

我最终使用React的useContext钩子来完成这项工作，将变量函数处理程序注册到全局应用程序上下文。我不确定这是一个反模式还是破坏了使用Netx.js的意义。。。。我们将看到…

如果不使用服务器端状态或

redux

，似乎无法从特定

页面的
布局
组件中获取函数

基本上，如果您想在
布局
和特定的
页面
中执行函数，我认为正确的方法是将函数移出
布局
和
页面
。因此，在
\u app.js
中定义函数

function MyApp({ Component, pageProps }) {
    function layoutFn() {
        console.log('Execute layoutFn')
    }

    return (
        <Layout layoutFn={layoutFn}> 
            <Component {...pageProps, layoutFn} />
        </Layout>   
    )
}

export default MyApp

函数MyApp（{Component，pageProps}）{
函数布局fn（）{
console.log（'executelayoutfn'）
}
返回(
)
}
导出默认MyApp

但是，我认为在
redux
中定义全局函数，并在
Layout
或
page
中使用
dispatch
执行全局函数更为合理。您可以参考此回答，该回答类似的问题解释了如何在半年内实现全局上下文-设计是否有效？它是反模式吗？Tnx