ReactJS | Показать или скрыть массив объектов на основе флага - PullRequest
Новая
       24

ReactJS | Показать или скрыть массив объектов на основе флага

1 голос
/ 20 мая 2019

Проблема: Я пытаюсь скрыть / показать элементы реакции, которые построены динамически на основе свойства Созданного объекта.Чтобы быть более точным, давайте возьмем следующий массив объектов: 

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

Я хочу map через них, и для каждого элемента создайте nav-item в моем NavBar.

Вот для этого 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
  ])
);

Это для статического элемента. Моя проблема заключается в том, как сделать то же самое для моих динамически создаваемых приложений.

По сути, я пытаюсь найти способ обернуть li условно, основываясь наname или permission.

Кроме того, как обращаться с App4, который не имеет разрешения.Как показать / скрыть это на карте.

Я думал об использовании фильтра, фильтрации для определенных разрешений или имени, но я застрял.

Я надеюсьЯ ясно дал понять, в чем моя проблема.Если вы можете помочь, было бы здорово.Спасибо!

Ответы [ 2 ]

1 голос
/ 20 мая 2019

Вы можете фильтровать: 

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>
);
0 голосов
/ 20 мая 2019

Я думаю, это поможет вам 

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