React：有条件地在菜单中渲染一个项目

Question

我正在使用带有 Material-UI 的 React。 我正在以下拉菜单的形式开发一个简单的 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 语法。

Answer 1

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

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

Answer 2

其实很简单

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

Answer 3

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

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