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

2022-04-15

功能示例展示：官方示例：
文章图片

封装完成的示例：
文章图片

技术栈：JS+TS+React+React节点克隆+React组件通信面包屑导航作用就是标识当前在那个路由页面面包屑导航使用方法如下：

import Breadcrumb from '@/components/Breadcrumb'const Article = () => { return // separator:分隔符首页内容管理


}
export default Article

自定义面包屑导航Breadcrumb的代码

import React from 'react' import BreadcrumbItem from '../BreadcrumbItem' interface PropsType { children: JSX.Element | JSX.Element[] separator?: string }const Breadcrumb = (props: PropsType): JSX.Element => { const { separator, children } = props /* 为什么要克隆children？如果不克隆children，那么separator是Breadcrumb组件属性的话，是无法传递给BreadcrumbItem组件，导致BreadcrumbItem没有分隔符 */ //React.Children.map用来遍历 ReactNode元素 //将所有childred遍历，将element克隆，并且给新的element加上separator( 分隔符 ) //React.Children.map返回一个新的ReactNode数组，将新的渲染 const BreadcrumbItemList = React.Children.map(children, ((element, index) => { if (children instanceof Array) { if ((children.length - 1) === index) { return React.cloneElement(element) } return React.cloneElement(element, { separator: separator ? separator : '>' }) } }))return {BreadcrumbItemList}}Breadcrumb.Item = BreadcrumbItem export default Breadcrumb

【如何使用|如何使用 Ts+react自定义面包屑导航】面包屑导航BreadcrumbItem的代码

interface ItemType { className?: string href?: string onClick?(): void children: any title?: string, separator?: string }const BreadcrumbItem = ({ className, href, onClick, children, title, separator }: ItemType) => { const click = () => { href && navigate(`${href}`) } return ({title} {children} // 除了最后一个item，其他的都有separator分隔符,这样就实现了面包屑导航栏 {separator}) } export default BreadcrumbItem