性能示例展现：

官网示例：

封装实现的示例：

技术栈：JS+TS+React+React节点克隆+React组件通信

面包屑导航作用就是标识以后在那个路由页面

面包屑导航应用办法如下：

import Breadcrumb from '@/components/Breadcrumb'const Article = () => {  return <div>    // separator:分隔符     <Breadcrumb separator='/'>      <Breadcrumb.Item>首页</Breadcrumb.Item>      <Breadcrumb.Item>内容治理</Breadcrumb.Item>    </Breadcrumb>  </div >}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 <div className='breadcrumb'>    {BreadcrumbItemList}  </div>}Breadcrumb.Item = BreadcrumbItemexport default Breadcrumb

面包屑导航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 (    <div      className={classNames([className, 'breadcrumb-item'])}      onClick={onClick || click}    >      {title}      {children}      // 除了最初一个item，其余的都有separator分隔符,这样就实现了面包屑导航栏      {separator}    </div>  )}export default BreadcrumbItem