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

功能示例展示：

官方示例：

封装完成的示例：

技术栈：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 = BreadcrumbItem
export 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