React JS从另一个文件中添加const值

Question

我有一个文件SidebarData.tsx

export const SidebarData = [
{
title: 'Home',
path: '/',
icon: <AiIcons.AiFillHome />  
}, 
{
title: 'Sales',
path: '/crm/sales/',
icon: <FaIcons.FaCartPlus />
}  
}, 
]

我想在另一个文件中添加在某些条件下的登录和注销。它是使用这个SidebarData常量并应用于在reactJS中制作侧边栏菜单。

提示不能给const变量赋值。下面是我的导航侧边栏菜单文件代码:Navigation.tsx

import {SidebarData} from './SidebarData'

interface NavigationProps {
showLoginBtn: boolean
}


let Navigation = (props: NavigationProps) => {

if (props.showLoginBtn) { 


}
else {
data  = [
...SidebarData,
{
title: 'Logout',
path: 'http://localhost:8000/logout',
icon: <AiIcons.AiFillHome /> 
}
]
}


return( 
<nav className="navbar-default navbar-static-side main-navigation" role="navigation">
<div className="title-header">
<div className="logo-container" style={{textAlign: "center"}}>
<img src={logo} width="70%" />
<h2>CEO-ME</h2>
</div>
</div>
<div className="sidebar-collapse">
<IconContext.Provider value={{ color: '#fff' }}>

<SidebarNav >
<SidebarWrap>
<NavIcon to='#'> 
<img src={logo} width="70%" /> 
</NavIcon>
{data.map((item :any, index :any) => {
return <SubMenu item={item} key={index} />;
})}
</SidebarWrap>
</SidebarNav>
</IconContext.Provider>
<div style={{ textAlign: "center", marginTop: "50px" }}>
<div className="font-size: 0.6rem">
<strong>Current System Time</strong><br />
</div>
<strong>Secured and protected by</strong><br />
<img src="https://www.cloudflare.com/img/logo-cloudflare-dark.svg" style={{width: "150px"}} />
</div>
</div>
</nav>
) 
};
export default Navigation

在SidebarData =[]中添加登录/注销有问题。如何解决

Answer 1

如何定义SideBarData作为一个函数?:

export const SidebarData = (showLoginBtn) => [
showLoginBtn ? {
title: 'Login',
path: '/login',
icon: <AiIcons.AiFillHome />   
} : {
title: 'Logout',
path: '/logout',
icon: <AiIcons.AiFillHome /> 
},
{
title: 'Home',
path: '/',
icon: <AiIcons.AiFillHome />  
}, 
{
title: 'Sales',
path: '/crm/sales/',
icon: <FaIcons.FaCartPlus />
}  
}, 
];

然后，在导航文件中:

import {SidebarData} from './SidebarData'

interface NavigationProps {
showLoginBtn: boolean
}

let Navigation = (props: NavigationProps) => ( 
<nav className="navbar-default navbar-static-side main-navigation" 
role="navigation">
<div className="title-header">
<div className="logo-container" style={{textAlign: "center"}}>
<img src={logo} width="70%" />
<h2>CEO-ME</h2>
</div>
</div>
<div className="sidebar-collapse">
<IconContext.Provider value={{ color: '#fff' }}>
<SidebarNav >
<SidebarWrap>
<NavIcon to='#'> 
<img src={logo} width="70%" /> 
</NavIcon>
{SidebarData(props.showLoginBtn).map((item :any, index :any) => {
return <SubMenu item={item} key={index} />;
})}
</SidebarWrap>
</SidebarNav>
</IconContext.Provider>
<div style={{ textAlign: "center", marginTop: "50px" }}>
<div className="font-size: 0.6rem">
<strong>Current System Time</strong><br />
</div>
<strong>Secured and protected by</strong><br />
<img src="https://www.cloudflare.com/img/logo-cloudflare-dark.svg" style={{width: "150px"}} />
</div>
</div>
</nav>
);
export default Navigation;

Answer 2

解决方案是添加另一个变量，我们可以使用它来绑定数据:

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