-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.js
87 lines (82 loc) · 2.08 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
import React from "react";
import { connect } from "react-redux";
import { NavBar } from "antd-mobile";
import { Route, Redirect } from "react-router-dom";
import Boss from "../boss";
import Genius from "../genius";
import NavLinkBar from "../navLink";
import User from "../user";
import Msg from "../msg";
import { getMegList, recvMsg } from "../../redux/chat.redux";
import QueueAnim from 'rc-queue-anim';
@connect(
state => state,
{ getMegList, recvMsg }
)
class Dashboard extends React.Component {
componentDidMount() {
// 添加判断,防止来回切换重复获取消息
if (!this.props.chat.chatmsg.length) {
this.props.getMegList();
this.props.recvMsg();
}
}
render() {
const { pathname } = this.props.location;
const user = this.props.user;
const navList = [
{
path: "/boss",
text: "牛人",
icon: "boss",
title: "牛人列表",
component: Boss,
hide: user.type === "genius"
},
{
path: "/genius",
text: "boss",
icon: "job",
title: "BOSS列表",
component: Genius,
hide: user.type === "boss"
},
{
path: "/msg",
text: "消息",
icon: "msg",
title: "消息列表",
component: Msg
},
{
path: "/me",
text: "我",
icon: "user",
title: "个人中心",
component: User
}
];
// 让动画生效,只渲染一个Route,根据当前的path决定
const page = navList.find(v => v.path === pathname);
return page ? (
<div>
<NavBar mode="dark" className="fixed-header">
{navList.find(v => v.path === pathname) ? navList.find(v => v.path === pathname).title : ""}
</NavBar>
<div style={{ marginTop: 45 }}>
{/* Switch只渲染命中的第一个模板组件 */}
{/* <Switch>
{navList.map(v => (
<Route key={v.path} path={v.path} component={v.component} />
))}
</Switch> */}
<QueueAnim type="scaleX" duration={800}>
<Route key={page.path} path={page.path} component={page.component} />
</QueueAnim>
</div>
<NavLinkBar data={navList} />
</div>
) : <Redirect to="/msg"></Redirect>;
}
}
export default Dashboard;