向您的Next.js应用添加包装器组件

如何使用包装器组件并向其中添加公共边栏或标头

您网站上的所有页面看起来大致相同。有一个镀铬层,一个通用的基础层,您只想更改其中的内容。

有一个导航栏,一个边栏,然后是实际内容。

您如何在Next.js中构建这样的系统?

有两种方法。一个正在使用高阶成分,通过创建一个components/Layout.js成分:

export default Page => {
  return () => (
    <div>
      <nav>
        <ul>....</ul>
      </nav>
      <main>
        <Page />
      </main>
    </div>
  )
}

在这里,我们可以为标题和/或边栏导入单独的组件,还可以添加所需的所有CSS。

您可以在每个页面中使用它,如下所示:

import withLayout from '../components/Layout.js'

const Page = () => <p>Heres a page!</p>

export default withLayout(Page)

但是我发现这仅适用于简单的情况,您无需致电getInitialProps()在页面上。

为什么?

因为getInitialProps()仅在页面组件上被调用。但是,如果我们从页面中导出withLayout()的高阶组件,Page.getInitialProps()不被调用。withLayout.getInitialProps()将。

为避免不必要地使我们的代码库复杂化,替代方法是使用props:

export default props => (
  <div>
    <nav>
      <ul>....</ul>
    </nav>
    <main>
      {props.content}
    </main>
  </div>
)

现在在我们的页面中,我们将其像这样使用:

import Layout from '../components/Layout.js'

const Page = () => ( <Layout content={( <p>Heres a page!</p> )} /> )

这种方法让我们使用getInitialProps()从我们的页面组件内部开始,唯一的缺点是必须在content支柱:

import Layout from '../components/Layout.js'

const Page = () => ( <Layout content={( <p>Heres a page!</p> )} /> )

Page.getInitialProps = ({ query }) => { //… }

免费下载我的Next.js手册


接下来的更多教程: