【React -- 9/100】 抽离顶部导航栏 - [组件复用]

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

考虑复用组件的健壮性，使用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;
}

效果