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

其实很简单

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

您可以使用您的属性值有条件地设置 css class :

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

Answer 3

根据您的示例并假设您的道具 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>
  ));

React：有条件地呈现菜单中的项目

React: conditionally render an item in the menu

reactjs

conditional-rendering

material-ui

react-functional-component