反应：有条件地渲染菜单中的项目

问题描述

我正在将React与Material-UI一起使用。 我正在以下拉菜单的形式开发一个简单的UI。我想通过传递条件作为道具来控制第一行的呈现。如何使用条件渲染或跳过第一行的渲染？

export const NativeSdkMenu = memo(({ showFirstMenuItem }) => (
  <Menu>
    <MenuItem component="a" href={link1}>
      {"First"}
    </MenuItem>
    <MenuItem component="a" href={link1}>
      {"Second"}
    </MenuItem>
    <MenuItem component="a" href={link1}>
      {"Third"}
    </MenuItem>
    <MenuItem component="a" href={link1}>
      {"Fourth"}
    </MenuItem>
  </Menu>
));

显然这不起作用：

if (showFirstMenuItem) {
    <MenuItem component="a" href={link1}>
      {"First"}
    </MenuItem>
}

我已经尝试了几种类似的方法，但是看起来我需要使用一些我不知道的特定JSX语法。

解决方法

实际上很简单

export const NativeSdkMenu = memo(({ showFirstMenuItem }) => (
  <Menu>
   {showFirstMenuItem && <MenuItem component="a" href={link1}>
   {"First"}
  </MenuItem>}
  <MenuItem component="a" href={link1}>
   {"Second"}
  </MenuItem>
  <MenuItem component="a" href={link1}>
   {"Third"}
  </MenuItem>
  <MenuItem component="a" href={link1}>
   {"Fourth"}
  </MenuItem>
</Menu>
));

,

您可以使用prop值有条件地设置css类：

<MenuItem component="a" href={link1} className={this.props.showFirstMenuItem ? style['your-class-name'] : ''}>
  {"First"}
</MenuItem>

,

根据您的示例并假设道具showFirstMenuItem是布尔值，如果showFirstMenuItem为true，则可以简单地使用&&运算符显示第一项：

export const NativeSdkMenu = memo(({ showFirstMenuItem }) => (
 <Menu>
  {showFirstMenuItem && (
    <MenuItem component="a" href={link1}>
      {"First"}
   </MenuItem>)}
   <MenuItem component="a" href={link1}>
    {"Second"}
   </MenuItem>
   <MenuItem component="a" href={link1}>
     {"Third"}
   </MenuItem>
   <MenuItem component="a" href={link1}>
    {"Fourth"}
   </MenuItem>
  </Menu>
  ));