页面切换导致导航重新渲染出现闪烁,有什么解决的办法吗
import React, { Component } from 'react';
import "./index.css";
const tabbarArr = [
{
className: 'icon-gouwuche',
text: '购物车',
path: '/catetory'
},
{
className: 'icon-HOMEMESSAGE',
text: '首页',
path: '/'
},
{
className: 'icon-yonghu',
text: '用户',
path: '/user'
},
{
className: 'icon-lanlvtubiaozhizuomoban-01',
text: '分类',
path: '/classify'
},
]
const TabBar = (WarppedComponent)=> class Tabbar extends Component {
static displayName = `Tabbar(${WarppedComponent.displayName || WarppedComponent.name })`;
tabbarChange(i){
const { path } = tabbarArr[i]
this.props.history.push(path)
}
render () {
const { path } = this.props.match;
return (
<div>
<div className="showContent">
<WarppedComponent {...this.porps}/>
</div>
<div className={ 'Tablebar' }>
{
tabbarArr.map((item,i)=> (
<div className={"taber-item" + (path === item.path ? ' active-tabar' : '')} key={i}>
<div className={ 'iconfont ' + item.className} style={{"fontSize":"20px"}} onClick={()=> this.tabbarChange(i)}></div>
<div>{item.text}</div>
</div>
))
}
</div>
</div>
)
}
}
export default TabBar