在 nextjs 的 Layout 组件中使用 getInitialProps

Question

因此，我将此布局组件位于无法访问 getInitialProps 的layouts文件夹中。 我想要做的是在我的布局组件中使用getInitialProps 。 我已经阅读了一些帖子，我需要将布局组件包含在_app.js文件中，我不希望我的所有页面都访问该布局。

 import React, {Component, Fragment} from 'react' import PropTypes from 'prop-types' class WithUserLayout extends Component { static async getInitialProps() { console.log('layout') } render() { const {children} = this.props return ( <Fragment> {children} </Fragment> ) } } WithUserLayout.propTypes = { children: PropTypes.oneOfType([ PropTypes.arrayOf(PropTypes.node), PropTypes.node ]) } export default WithUserLayout

有没有办法做到这一点？

谢谢！

Answer 1

其实我的评论不好。 是的，HOC 是解决这个问题的好方法。 getInitialProps仅可用于页面组件， getInitialProps是该组件外没有包装 HOC。 现在你有了一个 HOC， getInitialProps将可用，但现在不是你的实际页面组件！ 因此，您必须从此 HOC 手动调用该方法，如下所示：

import React, {Component, Fragment} from 'react'
import PropTypes from 'prop-types'

const withUserLayout = (child: Child) => {
  return class WithUserLayout extends Component {
    static async getInitialProps(ctx) {
      let pageProps = {};
      try {
        if (Child.getInitialProps) {
          pageProps = await Child.getInitialProps(ctx);
        } 
      } catch (err) {
       throw new Error(`Cannot invoke getInitalProps of ${Child.displayName}`, err.stack);
      }

      return pageProps;
    }

    render() {
      // Rendering
    }
  }
}

如需进一步参考，请查看此有用的代码片段