西树架构| 西树工作室 | 西树课堂

 找回密码
 立即注册
搜索
热搜: 活动 交友 discuz
查看: 20|回复: 0

04.实现nextjs基础布局组件,方便不同页面加载相同内容

[复制链接]

6

主题

6

帖子

50

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
50
发表于 2019-11-24 23:28:11 | 显示全部楼层 |阅读模式

04.实现nextjs基础布局组件,方便不同页面加载相同内容

使用 {this.props.children}

获取父级组件的全部内容显示在布局组件里面

{this.props.children}

新建 components/Layout/index.js

import React, { Component } from 'react'

export default class Layout extends Component {
  render () {
    return <div>
             <a href='/'>home</a>
             <a href='/blog'>blog</a>
             <a href='/about'>about</a>
             <p></p>
             {this.props.children}
           </div>
  }
}

在pages里面的页面增加内容

pages/index.js

pages/about.js

pages/blog.js

import Layout from '../components/Layout'
export default () => (<Layout> 
    Welcome to home page
</Layout>)

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

Archiver|手机版|小黑屋|西树架构

GMT+8, 2019-12-12 21:53 , Processed in 0.033612 second(s), 18 queries .

Powered by Discuz! X3.4

Copyright © 2001-2020, Tencent Cloud.

快速回复 返回顶部 返回列表