如何用Ts+react自定义面包屑导航

时间：2023-03-27 18:21:34 JavaScript

功能示例展示：官方示例：封装示例：技术栈：JS+TS+React+React节点克隆+React组件通信面包屑导航的作用是标识当前路由页面。面包屑导航的使用方法如下：importBreadcrumbfrom'@/components/Breadcrumb'constArticle=()=>{return

//separator:separator首页ContentManage

}exportdefaultArticle自定义面包屑导航Breadcrumb的代码importReactfrom'react'importBreadcrumbItemfrom'../BreadcrumbItem'interfacePropsType{children:JSX.Element|JSX.Element[]separator?:string}constBreadcrumb=(props:PropsType):JSX.Element=>{const{separator,children}=props/*为什么克隆孩子？如果children没有被clone，如果separator是Breadcrumb组件的属性，则无法传递给BreadcrumbItem组件，导致BreadcrumbItem没有separator*///React.Children.map用于遍历ReactNode元素//遍历所有childred，克隆元素，并为新元素添加分隔符//React.Children.map返回一个新的ReactNode数组，它将newrenderconstBreadcrumbItemList=React.Children.map(children,((element,index)=>{if(childreninstanceofArray){if((children.length-1)===index){returnReact.cloneElement(元素)}returnReact.cloneElement(element,{separator:separator?separator:'>'})}}))return{BreadcrumbItemList}

}Breadcrumb.Item=BreadcrumbItemexport默认面包屑代码面包屑导航的BreadcrumbItem接口ItemType{className?:stringhref?:stringonClick?():voidchildren:anytitle?:string,separator?:string}constBreadcrumbItem=({className,href,onClick,children,title,separator}:ItemType)=>{constclick=()=>{href&&navigate(`${href}`)}return({title}{children}//除了最后一项，其他都有separator分隔符，它实现了面包屑导航栏{separator}

)}exportdefaultBreadcrumbItem