隐藏和显示菜单核心 UI

Question

我在我的应用程序中集成了模板 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)

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

Answer 1

您可以使用TheSidebar.js 中的子组件类SidebarChild 来精确确定您想要的条件。

然后，将其注入<CSidebar >。

不要忘记使用常量const SBChild = connect()(SidebarChild) 才能在<CSidebar > 中调用SBChild。

希望能提供帮助。

Answer 2

阅读您的评论后，您可以调用 API 来检查授权（最好在登录后）并将其保存到状态。您可以将其用作标志，如下所示：

尝试将下面第一行的true 更改为false。

const getWorldAccess = () => true;//Call API for user access rights here and save it to a state

const World = () => <div>World</div>;

const Hello = () => {
    return (
      <div>Hello {getWorldAccess() && <World />}</div>
    );//replace getWorldAccess() with a state variable (you don't want to call API infinitely)
}

ReactDOM.render( <
  Hello / > ,
  document.getElementById('react')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="react"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

Answer 3

在组件中，CSidebar 只是将 minimize 的值设置为 true

Answer 4

您可以根据您想要的条件过滤TheSideBar.js 中的_nav.js 数组。这将隐藏它在侧边栏中显示。您必须知道要删除的项目的索引。

Answer 5

我认为这是对您问题的最佳回答。 首先，您必须根据以下结构划分 _nav.js 文件中的项目。 （这允许根据用户级别导出导航栏项）。

import React from 'react'
import CIcon from '@coreui/icons-react'

var navStaff = { 
 items: [
    {
      _tag: 'CSidebarNavItem',
      name: 'Dashboard',
      to: '/dashboard',
      icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
    }
 ]
};

var navAdmin = {
  items: [
    {
      _tag: 'CSidebarNavItem',
      name: 'Dashboard',
      to: '/dashboard',
      icon: <CIcon name="cil-speedometer" customClasses="c-sidebar-nav-icon"/>,
    },
    {
      _tag: 'CSidebarNavTitle',
      _children: ['USERS']
    },
    {
      _tag: 'CSidebarNavItem',
      name: 'Users',
      to: '/users',
      icon: 'cil-people',
    }
  ]
};

export {navStaff, navAdmin };

然后你的 TheSidebar.js 应该看起来像这样，用于在导航栏中允许不同的内容。如果您愿意，可以使用本地存储仅允许登录的用户类型分配选定的导航栏。

import React, { lazy, useState, useEffect, useRef} from 'react'
import { useSelector, useDispatch } from 'react-redux'
import {
  CCreateElement,
  CSidebar,
  CSidebarBrand,
  CSidebarNav,
  CSidebarNavDivider,
  CSidebarNavTitle,
  CNavItem,
  CProgress,
  CSidebarMinimizer,
  CSidebarNavDropdown,
  CSidebarNavItem,
} from '@coreui/react'
import CIcon from '@coreui/icons-react'

// sidebar nav config
import {navStaff, navAdmin} from './_nav'

const TheSidebar = () => {

  console.log(navStaff)

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

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

        <CCreateElement
          items={navAdmin.items}
          components={{
            CSidebarNavDivider,
            CSidebarNavDropdown,
            CSidebarNavItem,
            CSidebarNavTitle
          }}
        />

        <CSidebarNavDivider />
      </CSidebarNav>
      <CSidebarMinimizer className="c-d-md-down-none"/>
    </CSidebar>
  )
}

export default React.memo(TheSidebar)

希望你得到你需要的答案。谢谢。