布局组件

在我们的应用程序中，我们将在各种页面中使用通用的样式。 为此，我们可以创建一个通用的布局组件，并为每个页面使用它。 以下是一个例子：

将此内容添加到components/MyLayout.js中：

  1. import Header from './Header'
  3. const layoutStyle = {
  4.   margin: 20,
  5.   padding: 20,
  6.   border: '1px solid #DDD'
  7. }
  9. const Layout = (props) => (
  10.   <div style={layoutStyle}>
  11.     <Header />
  12.     {props.children}
  13.   </div>
  14. )
  16. export default Layout

一旦我们这样做，我们可以在我们的页面中使用这个布局如下：

  1. // pages/index.js
  3. import Layout from '../components/MyLayout.js'
  5. export default () => (
  6.     <Layout>
  7.        <p>Hello Next.js</p>
  8.     </Layout>
  9. )
  10. // pages/about.js
  12. import Layout from '../components/MyLayout.js'
  14. export default () => (
  15.     <Layout>
  16.        <p>This is the about page</p>
  17.     </Layout>
  18. )

Remember, you can access the app at http://localhost:3000/ to see what it looks like.

Now let’s try removing {props.children} from the Layout and see what happens to the app.

What will happen to the app?

  1. ✦There will be no effect.
  2. ✓The content of the page being displayed will be removed.
  3. ✦It will throw an error saying: “Layout needs some content.”
  4. ✦It will log a warning message for the browser component.

请记住，您可以访问 http://localhost:3000/ 来查看它的外观。

现在我们来试试从“布局”中删除{props.children}，看看会发生什么？

  1. ✦不会有影响。
  2. ✓显示页面的内容将被删除。
  3. ✦会出现一个错误：“布局需要一些内容”。
  4. ✦它将记录浏览器组件的警告消息。