学习 Next.js: 使用共享组件

Steve_Wang_ 发布于2019-08-20 16:56 / 1800人阅读

摘要：原始文档在现在搬过来学习入门学习页面之间的导航学习使用共享组件学习创建动态内容学习使用路由掩码创建干净的学习干净的服务器支持学习获取数据学习部署使用共享组件我们知道是和页面相关的通过导出一个组件创建一个页面然后把它放到目录中基于这个文件名存

原始文档在 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模块中导入组件并且使用他们.

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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