React / JavaScript - 菜单选项的可选隐藏

Question

我的UI 上有一个Menu，我试图实现的是provide an optional hiding 为每个指定的menu item，所有这些都基于登录用户role。

在我的Menu 组件中，通过MenuItems 进行迭代并根据它们的item.Hide 属性显示/隐藏它们：

菜单项数组MenuItems[]的结构如下：

const MenuItems[] = [
  {
     label: ''
     icon: ''
     hide: showOrHideByUserRole(userRole, ItemIDs.search)    // I added this property
  },
  {
     label: ''
     icon: ''
     hide: showOrHideByUserRole(userRole, ItemIDs.about)    // I added this property
  },
  {
     *etc*
  }
]

当然有ItemIDs enum，它只为特定的item name（字符串）提供id。还有userRole 状态。

这是我关心的showOrHideByUserRole 函数：

function showOrHideByUserRole(roleName:string, itemID: number){
      switch (itemID) {

        case 1:
            if(roleName === 'AAA')
                return false;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        case 2:
            if(roleName === 'AAA')
                return true;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        case 3:
            if(roleName === 'AAA')
                return false;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        case 4:
            if(roleName === 'AAA')
                return false;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        case 5:
            if(roleName === 'AAA')
                return false;
            else if(roleName === 'BBB')
                return false;
            else
              return true;

        default:
          return true;
          
      }
  }

如您所见，这看起来有点丑（至少对我来说？），我想知道是否有更漂亮/更好的方法来做我想做的事？

需要考虑的是未来的扩展role-wise。这意味着未来可能会有更多角色。

Answer 1

function showOrHideByUserRole(roleName, itemID) {
  switch (itemID) {
    case 3:
    case 4:
    case 5:
    case 1:
      if (roleName === 'AAA' || roleName === ' BBB') return false
      else return true
    case 2:
      if (roleName === 'AAA') return true
      else if (roleName === 'BBB') return false
      else return true

    default:
      return true
  }
}

您似乎有多个案例返回相同的内容，因此您可以将返回类似结果的案例堆叠起来，就像上面所做的那样

编辑：之前的答案错过了几个类似的案例，因此我编辑了答案