今天写的页面中需要重复使用到顶部导航栏,所以把顶部导航栏抽离出来

考虑复用组件的健壮性,使用PropTypes校验,可以自定义一个click事件

JSX
import React from "react";
import {NavBar} from "antd-mobile";
import './index.scss'
// 导入withRouter
import {withRouter} from 'react-router-dom' // 导入 props 校验的包
import PropTypes from 'prop-types' /*
注意:默认情况下,只有路由 Route 直接渲染的组件才能够获取到路由信息(比如:history.go()等)
如果需要在其他组件中获取到路由信息可以通过 withRouter 高阶组件来获取。 1 从 react-router-dom 中导入 withRouter 高阶组件
2 使用 withRouter 高阶组件包装 NavHeader 组件
目的:包装后,就可以在组件中获取到当前路由信息了
3 从 props 中解构出 history 对象
4 调用 history.go() 实现返回上一页功能
5 从 props 中解构出 onLeftClick 函数,实现自定义 < 按钮的点击事件
*/ function NavHeader({title,history, onLeftClick}) {
// 默认点击行为
const defaultClick = () => history.go(-1);
return(
<NavBar
mode="light"
icon={<i className="iconfont icon-back"/>}
onLeftClick={onLeftClick || defaultClick}
>{title}</NavBar>
)
} // 添加props校验
NavHeader.propTypes = {
title: PropTypes.string.isRequired,
onLeftClick: PropTypes.func
}; // withRouter(NavHeader) 返回值是一个组件
export default withRouter(NavHeader)
scss
    // 顶部导航栏
.nav-bar {
color: #333;
} .am-navbar-light {
background-color: #f6f5f6;
color: #333;
}
效果

【React -- 9/100】 抽离顶部导航栏 - [组件复用]的更多相关文章

  1. 用Vue来实现音乐播放器(五):路由配置+顶部导航栏组件开发

    路由配置 在router文件夹下的index.js中配置路由 import Vue from 'vue' import Router from 'vue-router'//配置路由前先引入组件impo ...

  2. uni-app动态修改顶部导航栏标题

    动态修改顶部导航栏标题有两种方法方式一.使用自定义到导航栏,覆盖原生导航栏 缺点:自定义到导航栏性能远远不如原生导航栏,手机顶部状态栏区域会被页面内容覆盖,这是因为窗体是沉浸式的原因,即全屏可写内容: ...

  3. 通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二)

    通过HTML+CSS+JavaScript实现鼠标移动到页面顶部导航栏出现,如果移出导航栏3秒又隐藏起来,而且不受滚动条影响(二) 效果:默认一直隐藏导航栏,当滚动条滚到超过300px按钮出现,点击回 ...

  4. android开发(49) android 使用 CollapsingToolbarLayout ,可折叠的顶部导航栏

    概述 在很app上都见过 可折叠的顶部导航栏效果.google support v7  提供了 CollapsingToolbarLayout 可以实现这个效果.效果图如下:    实现步骤 1. 写 ...

  5. [置顶] xamarin Tablayout+Viewpager+Fragment顶部导航栏

    最近几天不忙,所以把项目中的顶部导航栏的实现归集一下.android中使用TabLayout+ViewPager+Fragment制作顶部导航非常常见,代码实现也比较简单.当然我这个导航栏是基于xam ...

  6. 使用PagerSlidingTabStrip实现顶部导航栏

    使用PagerSlidingTabStrip配合ViewPager实现顶部导航栏. 效果图如下:          PagerSlidingTabStrip是github上的一个开源项目,项目地址如下 ...

  7. Android之仿今日头条顶部导航栏效果

    随着时间的推移现在的软件要求显示的内容越来越多,所以要在小的屏幕上能够更好的显示更多的内容,首先我们会想到底部菜单栏,但是有时候像今日头条新闻客户端要显示的内容太多,而且又想在主界面全部显示出来,所以 ...

  8. uni-app 去除顶部导航栏

    自学uni-app第一天,因为有一点点的小程序和vue的基础所以感觉对uni-app有一点点的亲切感,从今天呢开始着手从登录页学习uni-app,记录一些用到的知识点,欢迎大家一起学习. 启动页隐藏顶 ...

  9. Vant 顶部导航栏【van-tabs】Bug

    Vant 顶部导航栏[van-tabs]Bug 如果在外面包裹div控制显示隐藏会出现导航条不准确的bug 代码 <div class="selWrap" v-show=&q ...

随机推荐

  1. HDU 1312 Red and Black(bfs,dfs均可,个人倾向bfs)

    题目代号:HDU 1312 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1312 Red and Black Time Limit: 2000/100 ...

  2. pyinstaller打包的exe太大?你需要嵌入式python玄学

    pyinstaller打包一个exe动辄几十M几百M (特别是import pandas以后) 知乎上居然没有人po这方面的”知识“(手动狗头) 查了很多关于reduce pyinstaller打包出 ...

  3. go语言系列--输出正弦函数

    实验所用到的标准库和包 库与包之间的理解可以类比成:数据库种的库和表 库名 作用 image 常见图形格式的访问及生成 log 日志记录库 math 数学库 os 操作系统平台不依赖平台操作封装 查看 ...

  4. (63)通信协议之一json

    1.什么是JSON JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式.它基于JavaScript的一个子集. JSON采用完全独立于语言的文本格式,但是也使 ...

  5. springboot(六) Maven打包引入本地jar包

       springboot Maven打包引入本地jar包 最近在做项目的时候,有一些jar包不存在maven的依赖库中,所以需要自己引入本地jar包来达到需求,那么我们该如何去将本地的jar包引入s ...

  6. 源码阅读-JLRoutes路由设置

    最后更新: 2018-1-20 JLRoutes 是在 github 上 Star 比较多的一个, 在各大平台也有介绍, 一些知识可以参考到下面的连接查看. 本文仅仅作为我的思考以及对应的心得; 一. ...

  7. 常见iPhone设备尺寸及分辨率(持续更新)

    开发中常用的px与pt区别 px就是表示pixel,像素,是屏幕上显示数据的最基本的点: pt就是point,是印刷行业常用单位,等于1/72英寸. px全称为pixel,是一个点,它不是自然界的长度 ...

  8. windows安装程序制作

    作为一个学计算机的,现在才知道那些安装软件都是用软件封装工具封装起来的. 我们写好exe以后可以下载一个Inno setup5 对其打包成可安装的软件,期间可加入图标,readme,等等一些东西.

  9. 数据科学家人才危机现象,是FOMO还是Silver?

    数据科学家人才危机现象,是FOMO还是Silver? 数据科学家的人才短缺和薪水高涨已经达到了顶板,未来还会持续下去吗? 在过去几年中,高级分析(#大数据#分析)空间一直经历着严重的FOMO(害怕错过 ...

  10. visual studio 在windows远程调试 linux 程序 cout 输出乱码

    转载:https://www.cnblogs.com/findumars/p/6627255.html 反正是解决了. 以gcc为例,它有三个命令选项:-finput-charset=gb18030- ...