Reactjs 隐藏和显示菜单核心用户界面

我在应用程序中集成了模板

核心UI

重定向在

\u nav.js

上配置，如图所示：

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

例如：根据条件显示

公立学生

和隐藏

管理约定

菜单定义在\u nav.js

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

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)

然后，在sidebar.js上调用该数组

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

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)

从“React”导入React
从“react-redux”导入{useSelector，useDispatch}
从“@corei/react”导入{CCreateElement、CSidebar、CSidebarBrand、CSidebarNav、CSidebarNavDivider、CSidebarNavTitle、Csidebarminizer、CSidebarNavDropdown、CSidebarNavItem}
从“@coreui/icons”导入CIcon
//侧栏导航配置
从“/\u导航”导入导航
侧栏常数=（）=>{
const dispatch=usedpatch（）
const show=useSelector（state=>state.sidebarShow）
返回(
分派（{type:'set'，sidebarShow:val}）
>
)
}
导出默认的React.memo（侧栏）

---

如果您有任何建议，我们将不胜感激。非常感谢。

阅读您的评论，您可以调用API检查授权（最好是在登录后）并将其保存到state。您可以使用它作为标志，正如我在下面所做的：

尝试将下面第一行的

true

更改为

false

const getWorldAccess=（）=>true//在此处调用API以获得用户访问权限，并将其保存到状态
常量世界=（）=>世界；
康斯特你好=（）=>{
返回(
您好{getWorldAccess（）&&}
)；//用状态变量替换getWorldAccess（）（您不希望无限地调用API）
}
ReactDOM.render（<
你好/>，
document.getElementById（'react'）
);
您可以在
sidebar.js
中使用子组件类
SidebarChild
，以精确确定所需的条件

然后，将其注入

不要忘记使用常量
const SBChild=connect（）（SidebarChild）
在
内部调用
SBChild

希望能提供帮助。
在组件中，
CSidebar
只需将
minimize
的值设置为true
您的意思是根据条件隐藏/显示组件吗？问，因为这似乎很容易做到。您好，先生@Prashant Vishwakarma，非常感谢您的回复。我在问题中添加了一个屏幕截图：我的意思是（例如）：如果学生未经授权，则显示
公共学生
和隐藏
管理约定
。你有解决这个问题的想法吗？。非常感谢，先生。您好，先生@Prashant Vishwakarma，非常感谢您的回复，似乎我没有很好地解释我的问题。因此，我在我的问题中添加了
\u nav.js
和
sidebar.js
。我想
始终显示
公共学生菜单，并
隐藏
管理约定，例如，如果学生的分数低于10分。你有解决这个问题的想法吗？。非常感谢，先生