从另一个文件向常量值添加值

Question

我有一个文件SidebarData.tsx

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

我想在另一个文件中添加登录和注销。它使用这个SidebarData常量并应用于在reactJS中创建侧栏菜单。但它显示错误，因为无法为常量变量赋值

这是我的导航侧栏菜单文件代码：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;