使用react-breadcrumbs-dynamic

这是完全独立于路由器的解决方案，你可以将其与任何版本的React Router（2或3或4）或任何其他用于React的路由库一起使用，或者完全不进行路由。您只需要指定面包屑项目及其道具的组件。然而道具和部件应符合规定 分离。BreadcrumbsItem在组件和路由层次结构中的任何位置，都应在中介组件中指定道具。

基础使用

 

const Profile = ({user}) => (
  

 
    
      {user.firstName} {user.lastName}
    
 
    

      {user.firstName} {user.lastName}
    
  
)

 

安装

 

npm install --save react-through react-breadcrumbs-dynamic

 

基础配置

你已经使用声明通信通过 react tree   react-through？只需添加到您的React组件树的根目录：

import {ThroughProvider} from 'react-through'
 
const theApp = (
  
    
  
)
 
ReactDOM.render(theApp, document.getElementById('root'))

　　

实例配置

在此示例中，react-routerv4 用作面包屑项目：

import {Breadcrumbs} from 'react-breadcrumbs-dynamic'
 
const Page = (props) => (
  return (
    

      

 
         / }
          item={NavLink}
          finalItem={'b'}
          finalProps={{
            style: {color: 'red'}
          }}
        />
 
      
 
      {props.children}
 
      

        
      
    
  )
}

请注意，item并且finalItem需要react组件（类）而不是react元素。但是separator需要反应元素。

默认情况下，项目顺序基于URL长度。您可以根据需要覆盖排序顺序，只需在compareprop中指定比较函数即可，该比较函数接收包含面包屑项prop的一对对象。例如：a.weight-b.weight} removeProps={{weight: true}} />。

如果您使用基于标签的项目，那么您会发现将prop映射到prop 上renameProps或 将其duplicateProps有用，如下所示： 。tohref

将项目添加到面包屑

反应树中的每个路由组件通常都与路由和相应的面包屑相关联。每个组件都可以通过使用任何道具和子项进行渲染来添加其面包屑项目。

具有面包屑项目的路由组件的示例树：

import {BreadcrumbsItem} from 'react-breadcrumbs-dynamic'
 
const App = (props) => (
  

    Main Page
    {props.children}
    
  
)
 
const User = (props) => (
  

    Home
    
Home
    {props.children}
    
  
)
 
const Contacts = (props) => (
  

    Contacts
    
Contacts
    ...
  
)

您可以通过任何方向通过反应树声明性地传递带有任何数据，函数，组件等的道具，因为 react-through 允许这样做。

结果

上面代码的结果将表示面包屑，如下所示：

 Main Page
   / 
  Home
   / 
  Contacts

组成和功能

面包屑实例在实施Breadcrumbs部件，这是through container在以下方面 react-through。

属性	类型	默认	描述
separator	元件	undefined	面包屑项目之间的分隔符
item	零件	a	面包屑项目的组成部分
finalItem	零件	item道具价值	最终面包屑项目的组成部分
finalProps	宾语	{}	最终道具-将覆盖中指定的 BreadcrumbsItem
container	零件	span	包装器组件
containerProps	宾语	{}	道具container组件
compare	功能	（a，b）=> a.to.length-b.to.length	比较功能，用于分类项目
hideIfEmpty	布尔值	false	显示或隐藏面包屑容器（如果存在或不存在）
renameProps	宾语	{}	将道具传递的道具重命名BreadcrumbsItem为item
duplicateProps	宾语	{}	重复的道具物品传递BreadcrumbsItem到item
removeProps	宾语	{}	道具不会从道具传递BreadcrumbsItem到item

 

 

该BreadcrumbsItem组件是through agent具有支撑力的关键。to

该BreadcrumbsItem组件可能有任何道具，也可能有孩子。的每个道具BreadcrumbsItem将传递到中的item或finalItem道具中指定的相应面包屑组件Breadcrumbs。只有一个道具是强制性的。

属性	类型	默认	描述
to	串	需要	带URL的必填必填方位键
...	任何		任何属性-将映射到对应的面包屑项目

withBreadcrumbsItem() 功能

高级用法高级组件功能。它获得一个参数与您的自定义组件的反应和返回这将有相应的组件breadcrumbs在其道具与方法item()，并items()像 throughAgent从react-through。

this.props.breadcrumbs.item() 和 this.props.breadcrumbs.items()

先进的使用方法来配置您的react组件的面包屑项目。这些方法将通过withBreadcrumbsItem功能HOC添加到props 。该函数item()接受一个带有props的react组件，该函数 items()接受带有子代的react组件，子组件可以包含任意数量的组件以创建相应数量的面包屑项。这些功能的面包屑项目可以是任何反应组件，而只有道具才有意义。在这种情况下，Dummy和Item组件由库导出。如果不再需要当前组件来表示任何面包屑项目，则每个函数都接受null以将面包屑项目重置为无。

常数

该through area库使用的名称在breadcrumbsThroughArea变量中定义 。

包含方位键的道具名称在中定义 breadcrumbsBearingKey。

 

import { breadcrumbsThroughArea } from 'react-breadcrumbs-dynamic'
import { breadcrumbsBearingKey } from 'react-breadcrumbs-dynamic'