<p>解决方案是添加另一个变量,我们可以使用该变量绑定数据:</p>
<pre><code>interface NavigationProps {
showLoginBtn: boolean
}
let Navigation = (props: NavigationProps) => {
let links = []
if (props.showLoginBtn) {
links = [
{
title: 'Login',
path: backendURL + "login/",
icon: <AiIcons.AiFillHome />
},
...SidebarData
]
}
else {
links = [
...SidebarData,
{
title: 'Logout',
path: backendURL + "logout/",
icon: <AiIcons.AiFillHome />
}
]
}
return(
<nav className="navbar-default navbar-static-side main-navigation" role="navigation">
<div className="sidebar-collapse">
<IconContext.Provider value={{ color: '#fff' }}>
<SidebarNav >
<SidebarWrap>
<NavIcon to='#'>
<img src={logo} width="70%" />
</NavIcon>
{ links.map((item, index) => {
return <SubMenu item={item} key={index} />
})}
</SidebarWrap>
</SidebarNav>
</IconContext.Provider>
</div>
</nav>
)
}
export default Navigation
</code></pre>