<ListItem> 在 ReactJS 中的条件

Question

如何在 React 中为 <ListItem> 添加条件？如果角色不是管理员，这是为了隐藏。

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

Answer 3

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

<ListItem> 在 ReactJS 中的条件

Condition in <ListItem> In ReactJS

javascript

reactjs

react-router

react-router-dom

react-component