如何使用包裝組件並向其中添加常用的側邊欄或頂部欄
您網站上的所有頁面幾乎都是相同的,都有外觀元件和共同基礎層,您只需要更改其中的內容。
有導覽列、側邊欄和實際內容。
在 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>這是一個頁面!</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>這是一個頁面!</p>
)} />
)
這種方法允許我們在頁面組件內部使用getInitialProps()
,唯一的缺點是必須在content
屬性中編寫組件 JSX:
import Layout from '../components/Layout.js'
const Page = () => (
<Layout content={(
<p>這是一個頁面!</p>
)} />
)
Page.getInitialProps = ({ query }) => {
//...
}