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

Question

我这里有一个 HOC-wrapped-functional-component

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

如何为 myComponent 写 getInitialProps？

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

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

Should i call myComponent's getInitialProps in wrapperHoc?

是的，你走对了。

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

要解决此限制，您可以在 myComponent 中编写 getInitialProps，然后在 wrapperHoc 中调用 myComponent 的 getInitialProps。而wrapperHoc的getInitialProps也应该被上层组件这样调用。

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} />
        );
    }

});

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

In NextJS, how do i add getInitialProps() to a HOC-wrapped-functional-element?

reactjs

next.js

high-order-component

wrapperHoc.js 例子