reactjs - 隐藏和显示菜单核心 UI

问题描述

我将模板集成到Core UI我的应用程序中。

重定向配置_nav.js为该图片所示：

我在问是否可以根据这种情况隐藏或显示菜单？

例如：根据条件显示Public Student和隐藏。Manage Convention

菜单在_nav.js上定义

export default [
  {
    _tag: 'CSidebarNavTitle',
    _children: ['Menu'],
  },
  {
    _tag: 'CSidebarNavItem',
    name: 'Public Space',
    to: '/home',
  }, // ...
  {
    _tag: 'CSidebarNavItem',
    name: 'Manage Convention',
    to: '/manageConvention',
  }  // ...
]

然后，在TheSidebar.js上调用这个 Array

import React from 'react'
import { useSelector, useDispatch } from 'react-redux'
import { CCreateElement, CSidebar, CSidebarBrand, CSidebarNav, CSidebarNavDivider, CSidebarNavTitle, CSidebarMinimizer, CSidebarNavDropdown, CSidebarNavItem } from '@coreui/react'

import CIcon from '@coreui/icons-react'

// sidebar nav config
import navigation from './_nav'

const TheSidebar = () => {
  const dispatch = useDispatch()
  const show = useSelector(state => state.sidebarShow)

  return (
    <CSidebar
      show={show}
      onShowChange={(val) => dispatch({type: 'set', sidebarShow: val })}
    >
      <CSidebarBrand className="d-md-down-none" to="/">
        <CIcon
          className="c-sidebar-brand-full"
          name="logo-negative"
          height={35}
        />
        <CIcon
          className="c-sidebar-brand-minimized"
          name="sygnet"
          height={35}
        />
      </CSidebarBrand>
      <CSidebarNav>

        <CCreateElement
          items={navigation}
          components={{
            CSidebarNavDivider,
            CSidebarNavDropdown,
            CSidebarNavItem,
            CSidebarNavTitle
          }}
        />
      </CSidebarNav>
      <CSidebarMinimizer className="c-d-md-down-none"/>
    </CSidebar>
  )
}

export default React.memo(TheSidebar)

任何建议将不胜感激。非常感谢。

标签： reactjscore-ui

解决方案

我知道这是一个老问题，但是：

我认为最简单的解决方案是在每个“ CNavItem ”中添加一个元道具_nav.js

//_nav.js

const _nav = [    
       {
        component: CNavItem,
        name: 'Locations',
        to: '/location',
        meta: { role: ['Admin', 'Recruiter'] },
        icon: <CIcon icon={cilLocationPin} customClassName="nav-icon" />
      },
]

辅助函数

export default function hasAccess(userRole, roles) {
    if (Array.isArray(userRole)) {
        return roles.some((r) => userRole.map((item) => item.toLowerCase()).includes(r.toLowerCase()))
    } else {
        return roles.map((item) => item.toLowerCase()).includes(userRole.toLowerCase())
    }
}

之后，在AppSidebarNav.js组件内部，检查导航项是否包含至少一个用户角色。如果是，则渲染它，否则不。

userRole在这种情况下它是从 redux 商店返回的。如何获取登录的用户角色取决于您。

//AppSidebarNav.js

export const AppSidebarNav = ({ items }) => {
  const userRole = useSelector((state) => state.user.role)

  {...}

  const navItem = (item, index) => {
    const { component, name, badge, icon, meta, ...rest } = item
    const Component = component
    return (

      hasAccess(userRole, item.meta?.role || []) && <Component

        {...(rest.to &&
          !rest.items && {
          component: NavLink,
        })}
        key={index}
        {...rest}
      >
        {navLink(name, icon, badge)}
      </Component>
    )
  }
 
 
 {...}

  return (
    <React.Fragment>
      {items &&
        items.map((item, index) => (item.items ? (navGroup(item, index)) : navItem(item, index)))}
    </React.Fragment>
  )
}

reactjs - 隐藏和显示菜单核心 UI

问题描述

解决方案

推荐阅读