0.1.19 • Published 5 years ago
lb-react-router-extension v0.1.19
lb-react-router-extension
这是一个单页程序在tabs
中多开窗口,对react-router
进行扩展的程序。
依赖
- react
^15.4.2
- react-router
^4.2.0
- redux
^3.7.2
- lbc-wrapper
^0.0.12
安装
确认您的环境满足上述要求后,您可以通过npm
或yarn
来安装
$ yarn add lb-react-router-extension # or `npm install --save lb-react-router-extension`
如何使用
// 在react组件中导入
import renderTabs from 'lb-react-router-extension'
...
<div>
{renderTabs(this.props.route.routes, this.props)} // 在jsx代码中使用renderTabs替代原renderRoutes来加载路由组件
</div>
...
辅助对象
通过renderTabs
方法加载的子组件中会默认传入props
一个相关辅助操作的对象tabhelper
, 使用方法如下:
goto
this.props.tabhelper.goto(path, isNewTab) // tab导航跳转方法
Parameters | type | Description |
---|---|---|
path | string | 页面相对路径 |
isNewTab | boolean | 是否在新tab打开。若值为false则把新页面刷新到当前tab,true则会新打开一个tab,默认为true |
goback
this.props.tabhelper.goback() // tab导航返回
closetab
this.props.tabhelper.closetab() // 关闭当前tab
getsearch
this.props.tabhelper.getsearch() // 获取url中的search参数,
//例如:http://localhost:3000/#/dashboard/partners/legal/querylist?name=vfc&age=18
// 返回 {name: 'vfc', age: 18}
closeothersamepathtab
this.props.tabhelper.closeothersamepathtab() // 当页面打开时,关闭其他path一样但是search参数不一样的页面
dispatch
this.props.tabhelper.dispatch(type, payload) // 发送事件到其他tab页
Parameters | type | Description |
---|---|---|
type | string | 自定义事件类型 |
payload | any | 需要传递的数据 |
subscribe
// 订阅其他tab页发送的事件
this.unsubscribe = this.props.tabhelper.subscribe(function(type, payload) {
if(type === '事件ID') {
}
})
componentWillUnmount() {
this.unsubscribe() //注销订阅函数
}
Parameters | type | Description |
---|---|---|
type | string | 自定义事件类型 |
payload | any | 需要接收的数据 |
activeCallback
// 当某tab页已打开,并且tab页通过切换或点击菜单再次激活时调用注册的callback函数
this.props.tabhelper.activeCallback(this.queryTable.refresh)
Parameters | type | Description |
---|---|---|
callback | function | 回调函数 |
0.1.19
5 years ago
0.1.18
6 years ago
0.1.17
6 years ago
0.1.16
6 years ago
0.1.15
6 years ago
0.1.14
6 years ago
0.1.13
6 years ago
0.1.12
6 years ago
0.1.11
6 years ago
0.1.10
6 years ago
0.1.9
6 years ago
0.1.8
6 years ago
0.1.7
6 years ago
0.1.6
6 years ago
0.1.5
6 years ago
0.1.4
6 years ago
0.1.3
6 years ago
0.1.2
6 years ago
0.1.1
6 years ago
0.1.0
6 years ago
0.0.25
6 years ago
0.0.24
6 years ago
0.0.23
6 years ago
0.0.22
6 years ago
0.0.21
6 years ago
0.0.20
6 years ago
0.0.19
6 years ago
0.0.18
6 years ago
0.0.17
6 years ago
0.0.16
6 years ago
0.0.15
6 years ago
0.0.14
6 years ago
0.0.13
6 years ago
0.0.12
6 years ago