Состояние в <ListItem>В ReactJS

Question

Как мне поставить условие для <ListItem> в React? Это нужно, чтобы скрыть, если роль не админ.

const isAdmin = useSelector((state) => state.auth.is_admin);


const drawer = (
  <div>
    <Divider />
    <List>
      {[
        {
          id: 1,
          text: 'Products',
          url: `/products`,
          access: false,
          icon: <DashboardIcon/>,
        },
        {
          id: 2,
          text: 'Settings',
          url: `/settings`,
          access: true,
          icon: <AssignmentTurnedInIcon/>,
        },
      ].map((obj, index) => (
<ListItem button key={obj.id} onClick={() => props.history.push(obj.url)} {isAdmin === obj.access}>
  <ListItemIcon>{obj.icon}</ListItemIcon>
    <ListItemText
      disableTypography
      primary={
        <Typography type="body1" style={{ color: '#FFFFFF' }}>
          {obj.text}
        </Typography>
      }
    />
</ListItem>

))}
</List>
<Divider />
</div>
);

Answer 1

Вы можете использовать тернарный оператор. Проверьте, является ли isAdmin true, затем визуализируйте компонент, в другом случае просто null. Или, если у вас есть другое условие, например isAdmin === 'admin', используйте это.

Попробуйте следующее:

return <>
   {
      isAdmin ?
        <ListItem button key={obj.id} onClick={() => props.history.push(obj.url)} />
      : null
   }
<>

Очевидно, я удалил другие компоненты для примера. Но это дает вам представление о том, как действовать дальше.

+ 1 предложение :

isAdmin ясно показывает мне, что должно быть значение boolean, вероятно другое имя было бы лучше, например role или userRole, если вы проверяете как строку со значением "admin".

Надеюсь, это поможет!

Answer 2

const isAdmin = useSelector((state) => state.auth.is_admin);


const drawer = (
  <div>
    <Divider />
    <List>
      {[
        {
          id: 1,
          text: 'Products',
          url: `/products`,
          access: false,
          icon: <DashboardIcon/>,
        },
        {
          id: 2,
          text: 'Settings',
          url: `/settings`,
          access: true,
          icon: <AssignmentTurnedInIcon/>,
        },
      ].map(obj => isAdmin === obj.access? (
<ListItem button key={obj.id} onClick={() => props.history.push(obj.url)}>
  <ListItemIcon>{obj.icon}</ListItemIcon>
    <ListItemText
      disableTypography
      primary={
        <Typography type="body1" style={{ color: '#FFFFFF' }}>
          {obj.text}
        </Typography>
      }
    />
</ListItem>: ''

))}
</List>
<Divider />
</div>
);

Answer 3

вы можете написать свой код примерно так:

const isAdmin = useSelector((state) => state.auth.is_admin);

const ListItem = {[
    {
      id: 1,
      text: 'Products',
      url: `/products`,
      access: false,
      icon: <DashboardIcon/>,
    },
    {
      id: 2,
      text: 'Settings',
      url: `/settings`,
      access: true,
      icon: <AssignmentTurnedInIcon/>,
    },
  ].map((obj, index) => (
     obj.access === false && isAdmin || obj.access === true? 
<ListItem button key={obj.id} onClick={() => props.history.push(obj.url)} {}>
<ListItemIcon>{obj.icon}</ListItemIcon>
<ListItemText
  disableTypography
  primary={
    <Typography type="body1" style={{ color: '#FFFFFF' }}>
      {obj.text}
    </Typography>
  }
/>
</ListItem>
: ''

))}

const drawer = (
    <div>
      <Divider />
      <List>
        {ListItem}
  </List>
  <Divider />
  </div>
  );

access is false and isAdmin is true истинно, когда меню предназначено для роли администратора, а obj.access === true, когда меню предназначено для всех.

obj.access === false && isAdmin || obj.access === true