首页 > 其他分享 >好客租房157-封装顶部导航栏组件(4添加props校验)

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

时间:2023-02-10 16:04:31浏览次数:48  
标签:157 校验 PropTypes props import children onLeftClick


添加props校验

导入propTypes

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

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)

运行结果

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

标签:157,校验,PropTypes,props,import,children,onLeftClick
From: https://blog.51cto.com/u_15460007/6049553

相关文章

  • 好客租房49-组件的props(特点)
    特点1可以给组件传递任意类型的数据2props是只读的对象只能读取属性的值无法修改对象3注意:使用类组件时如果写了构造函数应该将props传递给super()否则无法在构造函......
  • 好客租房48-组件的props(基本使用)
    组件是封闭的要接受外部数据应该通过props来实现props的作用:接受传递给组件的数据传递数据:给组件标签添加属性接收数据:函数组件通过参数props接收数据类组件通过this.p......
  • 好客租房54-props深入(children属性)
    children属性表示组件标签的子节点当组件标签有子节点是props就会有该属性props中的组件可以是任意属性都是可以渲染的 //导入reactimportReactfrom'react'......
  • 好客租房55-props深入(2props校验)
    对于组件来说props是外来的无法保证使用者传入什么格式的数据传入的数据格式不对可能会导致组件内部报错关键问题:不知道报错的具体原因1安装包props-types2导入props-typ......
  • 好客租房56-props深入(3props校验-约束规则)
    1常见类型:Array,bool,func,number,object,string2React:element3必填项:isRequred4特定结构的想:shape({}) //导入reactimportReactfrom'react'importReactDO......
  • 好客租房57-props深入(4props的默认值)
    1给props设置默认值  //导入reactimportReactfrom'react'importReactDOMfrom'react-dom'importPropTypesfrom'prop-types'//导入组件......
  • C# CRC16计算校验域
    ///<summary>///计算校验域(CRC16)///</summary>///<paramname="data"></param>///<returns></returns>publicstaticbyte[......
  • JavaScript如何做空字符串的校验
    通过正则表达式校验写法:1if(str&&/[^\s]/.test(str)){2//不为空3}else{4//为空5}注释:-正则表达式中\s是指空白,包括空格、换行、tab缩进等所有......
  • json转java以及校验用户名是否存在
    json转java步骤:1.导入jackson相关jar包2.创建Jackson核心对象ObjectMapper3.调用ObjectMapper的相关方法进行转换1.readValue(json字符串数据,C......
  • Spring41 - 数据校验 Validation
    数据校验:ValidationSpringValidation概述在开发中,我们经常遇到参数校验的需求,比如用户注册的时候,要校验用户名不能为空、用户名长度不超过20个字符、手机号是合法的手......