我们正在使用React.js进行项目。我正在使用react-router-dom配置多个页面,并且我想使用NavLink更改当前活动的图标。
icon + sel用于活动页面。
render() {
const oddEvent = (match, location) => {
if (!match) {
console.log(!match)
return false
}
else{
console.log(!match)
}
const eventID = parseInt(match.params.eventID)
return !isNaN(eventID) && eventID % 2 === 1
console.log(eventID)
}
return (
<fragment>
<div className="bottom noright">
<div className="bottomcontents">
<div className="bottomicon">
<NavLink className="bottomiconinside bottomiconinsideside" src={home} exact to="/" isActive={oddEvent}>
<img className="iconcenter" src={!NavLink.match ? homesel : home}/>
</NavLink>
<NavLink className="bottomiconinside bottomiconinsideside" exact to="/about" isActive={oddEvent}>
<img className="iconcenter" src={!NavLink.match ? searchsel : search}/>
</NavLink>
<NavLink className="bottomiconinside bottomiconinsideside" to="/about/foo" isActive={oddEvent} >
<img className="iconcenter" src={!NavLink.match ? addsel : add}/>
</NavLink>
<NavLink className="bottomiconinside bottomiconinsideside" to="/posts" isActive={oddEvent}>
<img className="iconcenter" src={!NavLink.match ? accountsel : account}/>
</NavLink>
<NavLink className="bottomiconinside bottomiconinsideside" exact to="/" isActive={oddEvent}>
<img className="iconcenter" src={!NavLink.match ? settingsel : setting}/>
</NavLink>
</div>
{/* <div className="search"></div>
<div className="plus"></div>
<div className="mypage"></div>
<div className="setting"></div> */}
</div>
</div>
</fragment>
);
}
}
export default Bottom;
相关分类