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

Question

以前似乎没有针对 Next.js 提出过这个问题，并且一些谷歌搜索并没有真正提供答案。专门针对 React 提出了要求，但在 Next.js 框架中，我认为我一直使用的解决方案不会起作用。
我的应用程序基本上是一个商店，我在包装应用程序的布局组件中有一个导航菜单。布局组件中有一个篮子项目(显示项目数)，然后我有一个详细信息组件页面，我可以从该页面将项目添加到篮子。
我很欣赏它可能与使用 React(尤其是)Next.js 的范式背道而驰，但在过去我已经解决了一个 child 必须通过传递来更新父级状态的问题(在 React 和 React-Router 中)通过 child 的 Prop 处理函数。对于简单的应用程序，这通常可以为我解决问题并快速解决问题。
在下一个 JS 中，由于我从未专门初始化子组件(详细信息页面)，我如何调用父组件的函数(布局，包装我的整个应用程序)？
如果不使用服务器端状态和/或 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 钩子(Hook)来执行此操作，将变量函数处理程序注册到全局应用程序上下文。我不确定这是反模式还是破坏了使用 Netx.js 的意义......我们会看到......

Answer 1

似乎无法从 Layout 获取函数特定 page 中的组件不使用服务器端状态或 redux .
基本上，如果你想在 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 中定义全局函数更合理。并在 Layout 中执行或 page通过使用 dispatch .