如何从JSON在Reactjs中创建动态左导航菜单并创建动态选项卡

Question

我想基于提供给不同用户角色的访问权限来显示/隐藏应用程序中的左侧导航选项和选项卡。每个用户角色也被授予对应用程序中不同操作的访问权限。

Screen to be shown on clicking left menu option "Left Nav 1"

Screen to be shown on clicking left menu option "Left Nav 2"

数据为JSON格式。为用户检索的示例数据如下所示

[
  {
    "LeftNavOption": "Left nav 1",
    "Tab": null,
    "Operations": [
      "View",
      "Edit"
    ]
  },
  {
    "LeftNavOption": "Left Nav 2",
    "Tab": "Tab 1",
    "Operations": [
      "View"
    ]
  },
  {
    "LeftNavOption": "Left Nav 2",
    "Tab": "Tab 2",
    "Operations": [
      "View"
    ]
  },

  {
    "LeftNavOption": "Left Nav 3",
    "Tab": "Tab A",
    "Operations": [
      "View",
      "Add",
      "Edit",
      "Delete"
    ]
  },
    {
    "LeftNavOption": "Left Nav 3",
    "Tab": "Tab B",
    "Operations": [
      "View"
    ]
  }
]

是否有一种方法可以遍历JSON对象并在render（）函数内部构造左侧导航菜单？目前，我正在对菜单选项进行硬编码。我需要在单击每个左侧导航选项时调用不同的功能。

 {this.state.leftNavOptions.filter(e=>e.LeftNavOption==='Left nav 1').length>0 ? <li ><a href="" onClick={(e) => { this.showNav1Grid(e) }}><img src={leftNav1img} alt="" /> <span>Lef Nav 1</span></a></li> : null} 

我正在使用React.js和Bootstrap。一旦显示了左侧导航菜单，我还需要根据用户是否有权访问选项卡来显示/隐藏选项卡。