向您的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手冊


接下來的更多教程: