好客租房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

相关文章
|
数据库
会议OA必备!解密Layui神技:轻松构建动态可控的左侧权限菜单列表!
会议OA必备!解密Layui神技:轻松构建动态可控的左侧权限菜单列表!
84 0
|
1月前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
30 1
大事件项目18_个人中心_基本资料组件准备和路由
大事件项目18_个人中心_基本资料组件准备和路由
大事件项目18_个人中心_基本资料组件准备和路由
|
开发者
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
【 uniapp - 黑马优购 | 购物车页面(1)】如何创建购物车编译模式、 商品列表区域实现
256 0
|
存储 API 开发者
【 uniapp - 黑马优购 | 登录与支付 1】登录组件布局实现、用户信息布局与渲染
【 uniapp - 黑马优购 | 登录与支付 1】登录组件布局实现、用户信息布局与渲染
156 0
|
搜索推荐 数据安全/隐私保护
颜值即正义,使用SwiftUI搭建个人信息、账号绑定、通用设置详情页
颜值即正义,使用SwiftUI搭建个人信息、账号绑定、通用设置详情页
143 0
|
存储 小程序 API
【 uniapp - 黑马优购 | 购物车页面(2)】如何实现收货地址区域功能、常见问题解决方案
【 uniapp - 黑马优购 | 购物车页面(2)】如何实现收货地址区域功能、常见问题解决方案
315 0
【 uniapp - 黑马优购 | 购物车页面(3)】结算页面组件封装与渲染 (超详细代码讲解)
【 uniapp - 黑马优购 | 购物车页面(3)】结算页面组件封装与渲染 (超详细代码讲解)
208 0
|
小程序
微信小程序 - 父组件绑定子组件外传事件通信
微信小程序 - 父组件绑定子组件外传事件通信
124 0
|
JSON 前端开发 JavaScript
实战SSM_O2O商铺_13【商铺注册】View层之初始化页面数据
实战SSM_O2O商铺_13【商铺注册】View层之初始化页面数据
88 0