官网《Next.js —— 共享组件的使用》

我们知道Next.js是以页面去展现的，我们通过导出一个React 组件来创建一个页面，然后把页面放进'page'的路径下，于是就有了基于文件名的固定的url。

由于导出的页面其实是JavaScript的模块，所以当然也可以导入其它JavaScript组件到页面中。

这是一个任何其它JavaScript框架所期待的特性

在这节课中，我们将会创建一个公共的Header组件，并且将它置于多个页面。最后，我们将做一个布局组件来看看在它是如何帮助我们定义多样化页面的。

开始吧！

 

安装

在这节课中，我们需要一个简单的Next.js项目去演示。下载如下的事例app

git clone https://github.com/arunoda/learnnextjs-demo.git
cd learnnextjs-demo
git checkout using-shared-components

用如下代码去运行它

npm install
npm run dev

现在，你可以访问这个app通过导航到http://localhost:3000/。

 

创建一个Heaer组件

现在为我们的app创建一个Header组件。

在‘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

这个组件包含了两个有效的可链接到的页面。我们已经增加了一点样式以此来让它凸显出来。

使用这个Heaer组件

接下来，让我们导入这个组件，并且在页面中使用它。在'index.js'页面中，它看起来是这样的

import Header from '../components/Header'

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

 

当然你也可以在about.js中做如上操作。

现在，如果你导航到'http://localhost:3000/'，你会看到这个新的Header，并在两个页面的切换中，时隐时现。

 

现在让我们对app做一些简单的修改。

• 终止运行app
• 重命名'components'文件夹为'comps'.
• 从'../comps/Header'中导入Header组件而不是原来的'../components/Header'

再次启动app，它可用吗？答案是：依旧可用

 

组件路径

是的，它会如你所望正常运行。

我们没有必要非要把组件放在一个特殊的路径下；你可以随意请名字，唯一需要的特别路径是'pages'路径。

你甚至可以在'pages'路径中直接创建一个组件。但我们没有这么做，因为对Header最贱我们需要的不是一个直接的路径。

 

可布局的组件

在项目中，我们通常用一个公共的样式贯穿各式各样的页面。为了达到这个目的，我们可以创建一个公共的可布局的组件从而在每个页面使用它，以下是个例子：

添加如下内容到'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>
)

记住，你可以通过访问localhost:3000来看到底这个组件究竟如何，现在我们试着移除'{props.children}'，看看会发生什么？答案是：原来显示的内容被移除了。

 

渲染子组件

如果你移除'{props.children}'，那么布局组件就不会显示在'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、作为Header一样的组件

2、作为一种布局组件

你可以使用这些组件来做页面布局，样式展示，和其它你喜欢的任务方式。此外，这些组件可以通过导入NPM模块的方式使用它们。