import React, { PureComponent } from 'react';
import './styles.less';
import { renderRoutes } from 'react-router-config'
import { Link, } from 'react-router-dom'
import cs from 'classnames'
export default class extends PureComponent {
state = {
data: [
{ id: 0, text: '首页', icon: 'icon-shouye', path: '/home' },
{ id: 1, text: '购物车', icon: 'icon-gouwuchekong', path: '/home/shopping' },
{ id: 2, text: '我的', icon: 'icon-wode', path: '/home/mine' },
]
}
render() {
const { data } = this.state
return (
<div className='home'>
{/* 主页: 上是 路由 下是 底部 标签 */}
<div className='home_top'>
{renderRoutes(this.props.route.router)}
</div>
<div className='home_bot'>
{
data.map((v, k) => {
return (
<Link
to={v.path}
key={k}
className={cs({'aStyle': v.path === this.props.history.location.pathname})}
>
<dl>
<dt className={`iconfont ${v.icon}`}></dt>
<dd>{v.text}</dd>
</dl>
</Link>
)
})
}
</div>
</div>
)
}
}
React 改变底部样式
最新推荐文章于 2022-03-30 14:36:44 发布