三、Next.js，共享组件

Next.js是一个新的通用JavaScript框架，它为基于React和服务器的Web应用提供了一个新的可选方案。

Next.js目前已经开源，https://zeit.co/blog/next

我们知道,Next.js是关于页面的。我们可以通过导出一个React组件来创建一个页面，将该组件放在 pages 目录中。然后它将有一个基于文件名的固定URL。

因为导出的页面是JavaScript模块，我们还可以将其他JavaScript组件导入到它们中。

这是任何JavaScript框架都希望看到的特性。

在这个课程中，我们将创建一个公共的 Header 组件，并在多个页面中使用它。最后，我们会看看如何实现布局组件，看它如何能够帮助我们定义多个页面的外观。

让我们开始吧。

安装

在这节课中,我们需要一个简单的Next.js应用程序。试着下载下面的示例应用程序:

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来访问该应用程序。

创建Header组件

让我们为我们的应用程序创建一个Header组件。

将下面的内容添加到文件 components/header.js 中。

import Link from 'next/link'

const linkStyle = {
  marginRight: 15
}

const Header = () => (
    
        
          Home
        
        
          About
        
    
)

export default Header

这个组件包含两个链接到我们的应用程序的页面。我们对这个链接定义了样式，让它更突出一些。

使用Header组件

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

import Header from '../components/Header'

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

你也可以做同样的事情在 about.js 页面。

此时，如果您在http://localhost:3000/中导航到您的应用程序，您将能够看到新的标题并在页面之间导航。

image.png

让我们尝试对应用程序做一些简单的修改。

停止正在运行的应用程序。
将组件目录 components 重命名为 comps。
导入 Header 用 ../comps/Header 代替 ../components/Header.
再次启动应用程序。

能行吗？

组件目录

是的。它将按预期工作。

我们不需要把我们的组件放在一个特殊的目录中;这个目录可以命名为任何东西。惟一的特殊目录是页面目录。

甚至可以在 pages 目录中创建组件。

这里我们没有这样做，因为我们不需要直接URL到头组件。

布局组件

在我们的应用中，我们将在不同的页面中使用一种通用的样式。为此，我们可以创建一个通用的布局组件，并在每个页面使用它。这里有一个例子:

将这些内容添加到 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/index.js

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

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

请记住，您可以在http://localhost:3000/中访问该应用程序，查看它长成什么样子。

现在让我们试着在布局组件中移除 {props.children}。看看应用程序会发生什么。

应用会发生什么情况?

渲染子组件

如何你移除了 {props.children},

布局不能呈现我们放入布局元素的内容，如下所示:

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 () => ()

使用组件

我们已经提到了共享组件的两个用例:

作为通用的Header组件。
作为布局的

您可以使用组件来定义样式、页面布局和其他您喜欢的任务。另外，您可以从NPM模块中导入组件并使用它们。

本文翻译自：https://learnnextjs.com/basics/using-shared-components