13.react组件封装---header组件

react的组件封装

1.组件间的类名冲突，可以使用css in js的方案，创建.module.css,vue的scoped是一样的作用

import styles from './index.module.css'

2.使用children来传值，类似vue的slot

function NavHeader({
  children,
}){
...
{children}
...
}

3.react的路由只对路由的主组件有用，封装的组件拿不到history

解决方案：

// 导入 withRouter 高阶组件
import { withRouter } from 'react-router-dom'

export default withRouter(NavHeader)

全部代码

import React from 'react'

import { NavBar } from 'antd-mobile'

// 导入 withRouter 高阶组件
import { withRouter } from 'react-router-dom'

// 导入 props 校验的包
import PropTypes from 'prop-types'

// 导入样式
// import './index.scss'
import styles from './index.module.css'

// 添加 className 和 rightContent（导航栏右侧内容） 属性
function NavHeader({
  children,
  history,
  onLeftClick,
  className,
  rightContent
}) {
  // 默认点击行为
  const defaultHandler = () => history.go(-1)

  return (
    <NavBar
      className={[styles.navBar, className || ''].join(' ')}
      mode="light"
      icon={<i className="iconfont icon-back" />}
      onLeftClick={onLeftClick || defaultHandler}
      rightContent={rightContent}
    >
      {children}
    </NavBar>
  )
}

// 添加props校验
NavHeader.propTypes = {
  children: PropTypes.string.isRequired,
  onLeftClick: PropTypes.func,
  className: PropTypes.string,
  rightContent: PropTypes.array
}

// withRouter(NavHeader) 函数的返回值也是一个组件
export default withRouter(NavHeader)

使用

<NavHeader>地图找房</NavHeader>