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

Steve_Wang_ 發布于2019-08-20 16:56 / 1816人閱讀

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署使用共享組件我們知道是和頁面相關的通過導出一個組件創建一個頁面然后把它放到目錄中基于這個文件名存

原始文檔在 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 = () => (
    
        
          Home
        
        
          About
        
    
)

export default Header

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

使用頁頭組件

現在, 讓我們在頁面中導入這個剛創建的頁頭組件. 現在對于 pages/index.js, 它的內容看起來像下面這樣:

import Header from "../components/Header"

export default () => (
  
    
    Hello Next.js
  
)

你可以對 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) => (
  
    
    {props.children}
  
)

export default Layout

然后, 我們可以像下面一樣, 在我們的應用程序頁面中使用這個布局組件:

// pages/index.js

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

export default () => (
    
       Hello Next.js
    
)

// pages/about.js

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

export default () => (
    
       This is the about page
    
)

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

現在我們從布局組件中刪除 {props.chidren}, 看看會發生什么?

渲染子組件

如果你刪除了 {props.chidren}, 布局組件Layout不再渲染它所包含的內容:

export default () => (
    
       This is the about page
    
)

這只是創建布局組件的一種方式. 還有創建布局組件的其他方式:

import withLayout from "../lib/layout"

const Page = () => (
  This is the about page
)

export default withLayout(Page)

const Page = () => (
  This is the about page
)

export default () => ()

const content = (This is the about page)

export default () => ()

使用組件

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

1.作為公共的頁頭組件
2.作為布局組件

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

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83274.html

學習 Next.js: 頁面之間的導航

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署頁面之間的導航現在我們知道了如何創建一個應用程序并且運行它我們的示例應用程序只有一個簡單的頁面但原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

layman 2019-08-20 16:54 評論0 收藏0
學習 Next.js: 創建動態內容

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署創建動態頁面現在我們知道了如何使用多個頁面創建一個基本的應用程序為了創建頁面我們需要在磁盤上創建原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

caohaoyu 2019-08-20 16:56 評論0 收藏0
學習 Next.js: 入門

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署哪位分高的幫忙創建一個的標簽謝謝現暫時放在標簽下面了新建文章有時間限制一會全部發上來這是最近兩天原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

Miracle 2019-08-20 16:54 評論0 收藏0
【翻譯】Next.js背后的哲學和設計

摘要：無數的模板語言和框架應運而生但是技術始終被分割為前端和后端。這意味著一個頁面可以有很多的這并不會對其余的頁面有任何影響。提前綁定和編譯預測是一個非常有效的部署方式。最后，這是我們對于這個特定問題的貢獻。 Next.js 原文地址 Naoyuki Kanezawa (@nkzawa), Guillermo Rauch (@rauchg) 和 Tony Kovanen (@tonykova...

plokmju88 2019-08-21 11:17 評論0 收藏0
學習 Next.js: 獲取數據

摘要：原始文檔在現在搬過來學習入門學習頁面之間的導航學習使用共享組件學習創建動態內容學習使用路由掩碼創建干凈的學習干凈的服務器支持學習獲取數據學習部署為頁面獲取數據得益于路由的優點我們知道了如何創建一個具有簡介的應用程序實際上我們通常需要從遠程數原始文檔在 https://github.com/developerw... 現在搬過來. 學習 Next.js: 入門學習 Next.js: ...

NotFound 2019-08-20 16:56 評論0 收藏0