使用react-breadcrumbs-dynamic

廉价感情. 提交于 2019-12-10 16:09:43

这是完全独立于路由器的解决方案,你可以将其与任何版本的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 宾语 {} 将道具传递的道具重命名BreadcrumbsItemitem
duplicateProps 宾语 {} 重复的道具物品传递BreadcrumbsItemitem
removeProps 宾语 {} 道具不会从道具传递BreadcrumbsItemitem

 

 

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

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

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

withBreadcrumbsItem() 功能

高级用法高级组件功能。它获得一个参数与您的自定义组件的反应和返回这将有相应的组件breadcrumbs在其道具与方法item(),并items()像 throughAgentreact-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'

  

 

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!