在Next.js中如何为HOC包裹的函数组件添加getInitialProps？

要实现被高阶组件（HOC）包裹的组件的getInitialProps逻辑，你需要同时完成两步操作：给原组件挂载getInitialProps静态方法，同时在HOC内部手动调用该方法并透传返回值。

步骤1：给原组件挂载getInitialProps #

直接在你的myComponent函数上添加静态属性getInitialProps即可，和普通未被包裹的组件写法一致：

function myComponent ({ someProps, initialData }){
    return <div>{initialData}</div>
}

// 编写你的getInitialProps逻辑
myComponent.getInitialProps = async (ctx) => {
  // 示例：请求接口获取初始数据
  const res = await fetch('/api/your-data')
  const initialData = await res.json()
  // 返回的对象会作为props传入组件
  return { initialData }
}

export default wrapperHoc(myComponent)

步骤2：在HOC中调用子组件的getInitialProps #

这一步是必须的：因为Next.js只会识别你最终导出的组件（也就是HOC返回的包装组件）上的getInitialProps，如果你不在HOC中手动调用原组件的该方法，你写的逻辑不会被执行。

你需要修改你的wrapperHoc，补充如下逻辑：

function wrapperHoc(ChildComponent) {
  function WrappedComponent(props) {
    // 这里保留你HOC的原有逻辑，比如注入props、权限校验等
    const hocInjectedProps = { someProps: '来自HOC的属性' }
    return <ChildComponent {...props} {...hocInjectedProps} />
  }

  // 给HOC返回的包装组件添加getInitialProps
  WrappedComponent.getInitialProps = async (ctx) => {
    // 优先调用原组件的getInitialProps，拿到返回值
    const childInitialProps = typeof ChildComponent.getInitialProps === 'function'
      ? await ChildComponent.getInitialProps(ctx)
      : {}

    // 如果HOC自身也需要获取初始数据，也可以在这里处理
    const hocInitialProps = {}

    // 合并所有属性返回，最终会传入包装组件
    return { ...childInitialProps, ...hocInitialProps }
  }

  return WrappedComponent
}

额外注意事项 #

• 如果你的HOC是第三方依赖，无法修改源码，你可以在导出组件前，手动把getInitialProps挂载到HOC返回的包装组件上。
• 透传getInitialProps的上下文参数ctx时不要做删减，避免子组件无法拿到路由、请求头等必要信息。

内容的提问来源于stack exchange，提问作者danzel artamadja