使用react-breadcrumbs-dynamic

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

基础使用

 

const Profile = ({user}) => (
  <div>
 
    <BreadcrumbsItem
      to=`/user/${user.login}`
      icon='account-box'
    >
      {user.firstName} {user.lastName}
    </BreadcrumbsItem>
 
    <h1>
      {user.firstName} {user.lastName}
    </h1>
  </div>
)

 

安装

 

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

 

基础配置

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

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

　　

实例配置

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

import {Breadcrumbs} from 'react-breadcrumbs-dynamic'
 
const Page = (props) => (
  return (
    <div className="App">
      <Header>
 
        <Breadcrumbs
          separator={<b> / </b>}
          item={NavLink}
          finalItem={'b'}
          finalProps={{
            style: {color: 'red'}
          }}
        />
 
      </Header>
 
      {props.children}
 
      <Footer>
        <Breadcrumbs/>
      </Footer>
    </div>
  )
}

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

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

如果您使用<a>基于标签的项目，那么您会发现将prop映射到prop 上renameProps或 将其duplicateProps有用，如下所示： 。tohref<Breadcrumbs renameProps={{to:"href"}} />

将项目添加到面包屑

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

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

import {BreadcrumbsItem} from 'react-breadcrumbs-dynamic'
 
const App = (props) => (
  <div>
    <BreadcrumbsItem to='/'>Main Page</BreadcrumbsItem>
    {props.children}
    <Route exact path="/user" component={User} />
  </div>
)
 
const User = (props) => (
  <div>
    <BreadcrumbsItem to='/user'>Home</BreadcrumbsItem>
    <h2>Home</h2>
    {props.children}
    <Route exact path="/user/contacts" component={Contacts} />
  </div>
)
 
const Contacts = (props) => (
  <div>
    <BreadcrumbsItem to='/user/contacts'>Contacts</BreadcrumbsItem>
    <h2>Contacts</h2>
    ...
  </div>
)

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

结果

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

 <NavLink to='/'>Main Page</NavLink>
  <b> / </b>
  <NavLink to='/user'>Home</NavLink>
  <b> / </b>
  <b to='/user/contacts'>Contacts</b>

组成和功能

面包屑实例在实施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'