Javascript ReactJS |基于标志显示或隐藏对象数组

问题： 我试图做的是隐藏/显示基于所构造对象的属性动态构造的react元素。更准确地说，让我们使用以下对象数组：

const Apps = [
  {name: App1, permission: ViewApp1},
  {name: App2, permission: ViewApp2},
  {name: App3, permission: ViewApp3},
  {name: App4 },
]

我想通过它们

映射

，并为每个项目在我的导航栏中创建一个

导航项目

以下是关于该问题的

jsx代码

：

const ScreenModule = ({ apps = [], currentRoute }) => (
  <Fragment>
    {apps.map(app => (
      <li
        key={app.name}
        title={app.name}
      >
        <a href={getUrlLink(app)}>
          <span>{app.name}</span>
        </a>
      </li>
    ))}
  </Fragment>
);

这是一个静态元素我的问题在于如何对动态构建的应用程序执行完全相同的操作。

基本上，我正在试图找到一种方法，根据

名称

或

权限

有条件地包装li

另外，如何处理没有权限的

App4

。如何在地图中显示/隐藏该地图

我曾想过使用过滤器，过滤特定的权限或名称，但我被卡住了。

---

我希望我把我的问题说清楚。如果你能帮忙，那就太好了。谢谢大家!

我想这对你有帮助

const ScreenModule = ({ apps = [], currentRoute }) => (
  <Fragment>
    {apps.map(app => {
     return (app.permission ? 
      <li
        key={app.name}
        title={app.name}
      >
        <a href={getUrlLink(app)}>
          <span>{app.name}</span>
        </a>
      </li>:null)
     })}
  </Fragment>
);

constscreenmodule=（{apps=[]，currentRoute}）=>(
{apps.map（app=>{
返回（app.permission？

：空）
})}
);

您可以筛选：

const ScreenModule = ({ apps = [], currentRoute }) => (
  <Fragment>
    {apps.filter(app => app.permission).map(app => {
       return <li
         key={app.name}
         title={app.name}
       >
         <a href={getUrlLink(app)}>
           <span>{app.name}</span>
         </a>
       </li>
     })}
  </Fragment>
);

constscreenmodule=（{apps=[]，currentRoute}）=>(
{apps.filter（app=>app.permission）.map（app=>{
返回


})}
);

const ScreenModule = ({ apps = [], currentRoute }) => (
  <Fragment>
    {apps.filter(app => app.permission).map(app => {
       return <li
         key={app.name}
         title={app.name}
       >
         <a href={getUrlLink(app)}>
           <span>{app.name}</span>
         </a>
       </li>
     })}
  </Fragment>
);