javascript - 在 nextjs 的 Layout 组件中使用 getInitialProps

Question

因此，我将此布局组件置于 layouts 文件夹中，其中 getInitialProps 不可访问。我想要做的是在我的布局组件中使用 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 仅适用于页面组件，前提是该组件外没有包装 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
    }
  }
}

如需进一步引用，请查看此 useful code snippet