使用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'