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

Question

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

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

我很欣赏它可能违背使用 React（尤其是）Next.js 的范式，但在过去，我已经解决了子级必须通过传递来更新父级状态的问题（在 React 和 React-Router 中）通过子组件的 props 来处理函数。对于简单的应用程序，这通常对我有用并快速解决问题。

在下一个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 钩子来完成此操作，将变量函数处理程序注册到全局应用程序上下文。我不确定这是否是反模式或破坏了使用 Netx.js 的意义......我们会看到......

Answer 1

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

基本上，如果您想在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。