88 lines
2.1 KiB
JavaScript
88 lines
2.1 KiB
JavaScript
import React ,{FC} from "react";
|
||
import { TabBar } from 'antd-mobile'
|
||
import WidthUseNavigate from './../WidthUseNavigate/index'
|
||
import {
|
||
AppOutline,
|
||
MessageOutline,
|
||
UnorderedListOutline,
|
||
UserOutline,
|
||
} from 'antd-mobile-icons'
|
||
const tabs = [
|
||
{
|
||
key: '/home',
|
||
title: '首页',
|
||
icon: <AppOutline />,
|
||
badge: '1',
|
||
},
|
||
{
|
||
key: '/home/todo',
|
||
title: '待办',
|
||
icon: <UnorderedListOutline />,
|
||
badge: '2',
|
||
},
|
||
{
|
||
key: '/home/message',
|
||
title: '消息',
|
||
icon: <MessageOutline />,
|
||
badge: '3',
|
||
},
|
||
{
|
||
key: '/home/me',
|
||
title: '我的',
|
||
icon: <UserOutline />,
|
||
badge: '4',
|
||
},
|
||
]
|
||
|
||
class BottomInner extends React.Component{
|
||
|
||
state = {
|
||
// 默认选中的TabBar菜单项
|
||
selectedTab: this.props.useLocation
|
||
}
|
||
|
||
// 组件接收到新的props（此处，实际上是路由信息）就会触发该钩子函数
|
||
componentDidUpdate(prevProps) {
|
||
// prevProps 上一次的props，此处也就是上一次的路由信息
|
||
// this.props 当前最新的props，此处也就是最新的路由信息
|
||
// 注意：在该钩子函数中更新状态时，一定要在 条件判断 中进行，否则会造成递归更新的问题
|
||
if (prevProps.useLocation !== this.props.useLocation) {
|
||
// 此时，就说明路由发生切换了
|
||
this.setState({
|
||
selectedTab: this.props.useLocation
|
||
})
|
||
}
|
||
}
|
||
setRouteActive = (value) => {
|
||
this.props.to(value)
|
||
this.setState({
|
||
selectedTab: value
|
||
})
|
||
}
|
||
|
||
|
||
render() {
|
||
return <TabBar activeKey={this.state.selectedTab} onChange={value => this.setRouteActive(value)}>
|
||
{tabs.map(item => (
|
||
<TabBar.Item key={item.key} icon={item.icon} title={item.title} badge= {item.badge}/>
|
||
))}
|
||
</TabBar>
|
||
}
|
||
}
|
||
|
||
|
||
export function Todo() {
|
||
return <div>待办</div>
|
||
}
|
||
|
||
export function Message() {
|
||
return <div>消息</div>
|
||
}
|
||
|
||
export function PersonalCenter() {
|
||
return <div>我的</div>
|
||
}
|
||
|
||
// 使用高阶组件包裹当前类组件
|
||
const Bottom = WidthUseNavigate(BottomInner);
|
||
export default Bottom |