使用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 宾语 {} 将道具传递的道具重命名BreadcrumbsItemitem
duplicateProps 宾语 {} 重复的道具物品传递BreadcrumbsItemitem
removeProps 宾语 {} 道具不会从道具传递BreadcrumbsItemitem

 

 

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

BreadcrumbsItem组件可能有任何道具,也可能有孩子。的每个道具BreadcrumbsItem将传递到中的itemfinalItem道具中指定的相应面包屑组件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组件,子组件可以包含任意数量的组件以创建相应数量的面包屑项。这些功能的面包屑项目可以是任何反应组件,而只有道具才有意义。这种情况下DummyItem组件由库导出。如果不再需要当前组件来表示任何面包屑项目,则每个函数都接受null以将面包屑项目重置为无。

常数

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

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

 

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

  

 

你可能感兴趣的:(使用react-breadcrumbs-dynamic)