进修 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/, 你会看到新的页头, 而且能够在页面之间举行导航.

《进修 Next.js: 运用同享组件》

如今, 我们对这个应用程序举行一些小修正.

  • 住手应用程序.

  • 重命名 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模块中导入组件而且运用他们.

    原文作者:developerworks
    原文地址: https://segmentfault.com/a/1190000009604702
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞