这是完全独立于路由器的解决方案,你可以将其与任何版本的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-router
v4 <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长度。您可以根据需要覆盖排序顺序,只需在compare
prop中指定比较函数即可,该比较函数接收包含面包屑项prop的一对对象。例如:<Breadcrumbs compare={(a,b)=>a.weight-b.weight} removeProps={{weight: true}} />
。
如果您使用<a>
基于标签的项目,那么您会发现将prop映射到prop 上renameProps
或 将其duplicateProps
有用,如下所示: 。to
href
<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'
来源:https://www.cnblogs.com/Ewarm/p/12017053.html