/

在 Next.js 應用程式中增加包裝組件

在 Next.js 應用程式中增加包裝組件

如何使用包裝組件並向其中添加常用的側邊欄或頂部欄

您網站上的所有頁面幾乎都是相同的，都有外觀元件和共同基礎層，您只需要更改其中的內容。

有導覽列、側邊欄和實際內容。

在 Next.js 中要如何建立這樣的系統？

有兩種方法。一種是使用高階元件，通過創建components/Layout.js組件：

1
2
3
4
5
6
7
8
9
10
11
12
export default Page => {
 return () => (
 <div>
 <nav>
 <ul>....</ul>
 </nav>
 <main>
 <Page />
 </main>
 </div>
 )
}

我們可以在其中匯入獨立的頁首和/或側邊欄組件，還可以添加所需的所有 CSS。

然後像這樣在每個頁面中使用它：

1
2
3
4
5
import withLayout from '../components/Layout.js'

const Page = () => <p>這是一個頁面!</p>

export default withLayout(Page)

但是我發現這只適用於簡單的情況，不需要在頁面上調用getInitialProps()。

為什麼這樣做會有問題呢？

因為getInitialProps()只在頁面組件上被呼叫。但如果我們從頁面中導出高階元件withLayout()，則不會調用Page.getInitialProps()，而會調用withLayout.getInitialProps()。

為了避免過於複雜化程式碼庫，另一種方法是使用 props：

1
2
3
4
5
6
7
8
9
10
export default props => (
 <div>
 <nav>
 <ul>....</ul>
 </nav>
 <main>
 {props.content}
 </main>
 </div>
)

現在我們在頁面中像這樣使用它：

1
2
3
4
5
6
7
import Layout from '../components/Layout.js'

const Page = () => (
 <Layout content={(
 <p>這是一個頁面!</p>
 )} />
)

這種方法允許我們在頁面組件內部使用getInitialProps()，唯一的缺點是必須在content屬性中編寫組件 JSX：

1
2
3
4
5
6
7
8
9
10
11
import Layout from '../components/Layout.js'

const Page = () => (
 <Layout content={(
 <p>這是一個頁面!</p>
 )} />
)

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

tags: [“Next.js”, “higher order component”, “wrapper component”, “props”, “getInitialProps”]