【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;

}

效果