学习 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模块中导入组件而且使用他们.