reactjs - 在 NextJS 中，如何将 getInitialProps() 添加到 HOC 包装的功能元素？

Question

我在这里有一个 HOC 包装的功能组件

export default wrapperHoc( function myComponent ({ someProps }){
    return(
       <div/>
    )
})

我该怎么getInitialProps写myComponent？

我应该打电话进来myComponent吗？getInitialPropswrapperHoc

Answer 1

  const YourNewComponent = wrapperHoc(...)

  YourNewComponent.getInitialProps = async (ctx) => {
    const res = await fetch('https://api.github.com/repos/vercel/next.js')
    const json = await res.json()
    return { stars: json.stargazers_count }
  }

  export default YourNewComponent

Answer 2

我应该在 wrapperHoc 中调用 myComponent 的 getInitialProps 吗？

是的，你在正确的轨道上。

next.js文档说`getInitialProps 不能在子组件中使用，只能在每个页面的默认导出中使用。

要解决此限制，您可以在 myComponent 中编写代码，然后在 wrapperHoc 中getInitialProps调用 myComponent 。getInitialProps并且 wrapperHocgetInitialProps也应该以这种方式由上层组件调用。

wrapperHoc.js 示例

您可以随意调整getInitialProps()以添加其他属性并调整render()以添加其他 html 元素。

export default (WrappedComponent) => (class WrapperHOC extends React.Component {
    static async getInitialProps(args) {
        return WrappedComponent.getInitialProps ? await WrappedComponent.getInitialProps(args) : {};
    }
    render() {
        return (
          <WrappedComponent {...this.props} />
        );
    }

});