代码之家 › 专栏 › 技术社区 › Richard Topchii

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

conditional-rendering react-functional-component material-ui reactjs

-1

Richard Topchii · 技术社区 · 4 年前

我正在使用React with Material 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语法。

3 回复 | 直到 4 年前

1

jean182 4 年前

根据您的示例,假设prop 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>
  ));

2

Sohaib 4 年前

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

3

1

AltoDev 4 年前

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