學習 Next.js: 使用共享組件

原始文檔在 https://github.com/developerw... 如今搬過來.

學習 Next.js: 入門
學習 Next.js: 頁面之間的導航
學習 Next.js: 使用共享組件
學習 Next.js: 建立動態內容
學習 Next.js: 使用路由掩碼建立乾淨的URL
學習 Next.js: 乾淨URL的服務器支持
學習 Next.js: 獲取數據
學習 Next.js: 部署

使用共享組件

咱們知道 Next.js 是和頁面相關的. 經過導出一個 React組件建立一個頁面, 而後把它放到 pages 目錄中, 基於這個文件名, Next.js存在一個固定的URL.

由於導出的頁面是Javascript模塊, 咱們固然也可以導入其餘組件進來.

在這節課中, 咱們會建立一個共享的頁頭組件, 並在多個頁面之間共用. 最後咱們事先一個佈局組件來看看, 它是如何定義多個頁面的外觀的.

設置

爲了演示這節課說講的知識點, 咱們須要一個可運行的示例應用程序, 經過下面的命令來獲取一個現成的應用程序:

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout navigate-between-pages

能夠經過下面的命令行來運行:

npm install
npm run dev

訪問 http://localhost:3000.

建立頁頭組件

如今, 讓咱們來爲咱們的應用程序建立一個頁頭組件. 添加下面的代碼到 components/Header.js 模塊文件中.

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

const Header = () => (
    <div>
        <Link href="/">
          <a style={linkStyle}>Home</a>
        </Link>
        <Link href="/about">
          <a style={linkStyle}>About</a>
        </Link>
    </div>
)

export default Header

該組件包含兩個連接到其餘頁面的鏈接. 咱們同時給兩個連接設置了一個樣式對象, 設置了它的字體爲15.

使用頁頭組件

如今, 讓咱們在頁面中導入這個剛建立的頁頭組件. 如今對於 pages/index.js, 它的內容看起來像下面這樣:

import Header from '../components/Header'

export default () => (
  <div>
    <Header />
    <p>Hello Next.js</p>
  </div>
)

你能夠對 pages/about.js 頁面作一樣的事情. 如今, 若是你訪問 http://localhost:3000/, 你會看到新的頁頭, 而且可以在頁面之間進行導航.

如今, 咱們對這個應用程序進行一些小修改.

• 中止應用程序.

• 重命名 components 目錄爲 comps.

• 從 ../comps/Header 導入, 而非 ../components/Header

• 再次啓動應用程序

它還能工做麼?

組件目錄

是的, 和以前同樣, 工做正常! 咱們不須要把組件放在一個特殊的目錄下, 組件目錄能夠是任意名稱, 惟一特殊的目錄就是 pages 目錄, 你甚至能夠在 pages 目錄中建立組件目錄. 這裏, 咱們沒有直接在 pages 目錄下建立組件目錄是由於, 咱們不須要直接鏈接到 Header 組件.

譯註: pages目錄就像Web服務器的根目錄同樣, 經過天然的目錄/URL路徑, 你能夠訪問到 pages 目錄下的組件. 就像Linux文件系統同樣, URL中的PATH和文件系統的路徑是一一對應的.

佈局組件

在咱們的應用程序中, 咱們在多個頁面之間共享一個公共的樣式. 爲此咱們能夠建立一個公共的佈局組件, 而且在多個頁面使用它. 下面是一個例子, 添加下面的代碼到 components/MyLayout.js 模塊文件:

import Header from './Header'

const layoutStyle = {
  margin: 20,
  padding: 20,
  border: '1px solid #DDD'
}

const Layout = (props) => (
  <div style={layoutStyle}>
    <Header />
    {props.children}
  </div>
)

export default Layout

而後, 咱們能夠像下面同樣, 在咱們的應用程序頁面中使用這個佈局組件:

// pages/index.js

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

export default () => (
    <Layout>
       <p>Hello Next.js</p>
    </Layout>
)

// pages/about.js

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

export default () => (
    <Layout>
       <p>This is the about page</p>
    </Layout>
)

訪問 http://localhost:3000/, 看看有什麼效果.

如今咱們從佈局組件中刪除 {props.chidren}, 看看會發生什麼?

渲染子組件

若是你刪除了 {props.chidren}, 佈局組件Layout再也不渲染它所包含的內容:

export default () => (
    <Layout>
       <p>This is the about page</p>
    </Layout>
)

這只是建立佈局組件的一種方式. 還有建立佈局組件的其餘方式:

import withLayout from '../lib/layout'

const Page = () => (
  <p>This is the about page</p>
)

export default withLayout(Page)

const Page = () => (
  <p>This is the about page</p>
)

export default () => (<Layout page={Page}/>)

const content = (<p>This is the about page</p>)

export default () => (<Layout content={content}/>)

使用組件

上面, 咱們提到了, 兩種建立共享組件的方式:

1.做爲公共的頁頭組件
2.做爲佈局組件

你能夠把組件用於: 設置公共樣式, 頁面佈局, 以及任何其餘你想要的用途. 另外, 你也能夠從NPM模塊中導入組件而且使用他們.