反应JS |根据标志显示或隐藏对象数组答案

【问题标题】：ReactJS | Show or Hide Array of Objects based on flag反应JS |根据标志显示或隐藏对象数组
【发布时间】：2019-05-20 13:02:50
【问题描述】：

问题： 我想要做的是隐藏/显示基于对象构造的属性动态构造的反应元素。更准确地说，让我们采用以下对象数组：

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

我想通过它们map，并在我的导航栏中为每个项目创建一个nav-item。

这是jsx code：

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>
);

现在，通常当我想检查何时显示一个元素时，我会将该 jsx 元素包装在以下实用程序函数中：

const AuthViewAdminManagement = ConditionalLoader(({ user }) =>
  // user = The currently loggedIn user
  userHasPermission(user, [
    Role.ViewApp1 // My ConstantArray of Permissions to check against
  ])
);

这是一个静态元素。 我的问题在于如何为我的动态构建的应用程序做完全相同的事情。

基本上，我正在尝试根据name 或permission 有条件地包装li。

还有，没有权限的App4怎么处理。如何在地图中显示/隐藏那个。

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

我希望我能弄清楚我的问题是什么。如果您能提供帮助，那就太好了。谢谢！

【问题讨论】：

标签： javascript reactjs filter es6-map

【解决方案1】：

您可以过滤：

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>
);

【讨论】：

【解决方案2】：

我想这会对你有所帮助

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>
);

【讨论】：