python - React JS 将值添加到另一个文件中的 const 值
问题描述
我有一个文件SidebarData.tsx
export const SidebarData = [
{
title: 'Home',
path: '/',
icon: <AiIcons.AiFillHome />
},
{
title: 'Sales',
path: '/crm/sales/',
icon: <FaIcons.FaCartPlus />
}
},
]
我想在另一个文件中的某些条件下添加登录和注销。哪个使用此 SidebarData const 并应用于在 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 = [] 中添加登录/注销存在问题。如何解决
解决方案
如何将 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;
推荐阅读
- c# - 如何使 EF.Functions.Like 不区分大小写?
- python - Django 按用户更改表单结构
- laravel - Carbon::now()->format('Ymd') 和 Carbon::now(7)->format('Ymd') 之间的区别
- java - 禁用菜单项?
- c - 解决 C 警告 - 取消引用空指针
- java - 如何解决 SensorEventListener 操作单独线程中出现的 ANR 问题?
- reactjs - 输入值不随嵌套状态更新
- c# - 集成 Microsoft Identity MSAL 后 azurewebsites.net webapp 上出现未经授权的 401 错误。本地主机工作
- reactjs - 如何连接由 webpack 创建的初始 css/js 文件?
- azure-application-insights - Application Insights 如何推断客户端的设备型号?