好客租房157-封装顶部导航栏组件(4添加props校验)

简介: 好客租房157-封装顶部导航栏组件(4添加props校验)

添加props校验

导入propTypes

图片.png

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"
// 添加props校验
NavHeader.propTypes = {
    children: PropTypes.string.isRequired,
    onLeftClick: PropTypes.func
  }
 function NavHeader({children,history,onLeftClick}) {
 // 默认点击行为
 const defaultHandler = () => history.go(-1)
 return (
   <NavBar
     className="navbar"
     mode="light"
     icon={<i className="iconfont icon-back" />}
     onLeftClick={onLeftClick || defaultHandler}
   >
     {children}
   </NavBar>
 )
}
//函数的返回值也是一个组件
export default withRouter(NavHeader)

运行结果

图片.png

相关文章
|
8月前
|
小程序
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
【微信小程序】-- 自定义组件 - 纯数据字段 & 组件的生命周期(三十六)
|
数据库
会议OA必备!解密Layui神技:轻松构建动态可控的左侧权限菜单列表!
会议OA必备!解密Layui神技:轻松构建动态可控的左侧权限菜单列表!
98 0
|
6月前
|
开发框架 前端开发 JavaScript
使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理
使用Vue-TreeSelect组件实现公司-部门-人员级联下拉列表的处理
|
3月前
|
前端开发
前端如何制作简易的菜单多级导航栏
前端如何制作简易的菜单多级导航栏
98 0
大事件项目18_个人中心_基本资料组件准备和路由
大事件项目18_个人中心_基本资料组件准备和路由
大事件项目18_个人中心_基本资料组件准备和路由
|
8月前
|
数据可视化 开发者
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
CodeWave智能开发平台--03--目标:应用创建--04自定义主题样式5子页面页面跳转逻辑
|
6月前
|
小程序 JavaScript 前端开发
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
【微信小程序-原生开发】实用教程06-轮播图、分类页签 tab 、成员列表(含Tdesign升级,切换调试基础库,设置全局样式,配置组件按需注入,添加图片素材,wx:for,生命周期 onLoad)
192 0
|
数据格式
宜搭自定义页面组件 TablePc 渲染错误
宜搭自定义页面组件 TablePc 渲染错误
280 4
|
小程序
微信小程序 - 父组件绑定子组件外传事件通信
微信小程序 - 父组件绑定子组件外传事件通信
133 0
|
JavaScript
uniapp制作app顶部原生导航栏输入框的内容自动变化
uniapp制作app顶部原生导航栏输入框的内容自动变化
310 0
uniapp制作app顶部原生导航栏输入框的内容自动变化