React: условно отобразить элемент в меню

Я использую React с 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, которого я не знаю.


reactjs material-ui react-functional-component conditional-rendering
person Richard Topchii    schedule 11.11.2020    source источник
comment
Пожалуйста, покажите свою попытку. Мы будем рады показать вам, где что-то пошло не так, или лучшую альтернативу. Если попытки не предпринимались, прочтите раздел документации об условном рендеринге, в частности, раздел о встроенных условиях.   -  person Brian Thompson    schedule 11.11.2020
comment
Добавлен....................   -  person Richard Topchii    schedule 11.11.2020
comment
Отвечает ли это на ваш вопрос? Можно ли использовать if .. .else ... в функции рендеринга React?   -  person Brian Thompson    schedule 11.11.2020

Ответы (3)


arrow_upward
3
arrow_downward

На основе вашего образца и при условии, что ваш параметр 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>
  ));
person jean182    schedule 11.11.2020
comment
Отличное решение. Заключение всего пункта меню в круглые скобки () было основной причиной того, что некоторые из моих подходов не работали. - person Richard Topchii; 11.11.2020
comment
Пожалуйста, ознакомьтесь с этой статьей, чтобы увидеть другие подходы к условному рендерингу: robinwieruch.de/conditional-rendering-react - person jean182; 11.11.2020
comment
Спасибо, я видел эту статью, прежде чем попробовать несколько своих подходов ... - person Richard Topchii; 11.11.2020

arrow_upward
2
arrow_downward

На самом деле довольно просто

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>
));
person Sohaib    schedule 11.11.2020
comment
Хорошее направление, но мне также пришлось добавить ( и ) вокруг всего MenuItem, чтобы он скомпилировался. - person Richard Topchii; 11.11.2020

arrow_upward
1
arrow_downward

Вы можете установить класс css условно с вашим значением свойства:

<MenuItem component="a" href={link1} className={this.props.showFirstMenuItem ? style['your-class-name'] : ''}>
  {"First"}
</MenuItem>
person AltoDev    schedule 11.11.2020
comment
Я бы предпочел решение на основе реакции, так что мне не придется изменять стили / создавать классы, но спасибо за помощь! - person Richard Topchii; 11.11.2020
comment
Srry Я пропустил, я подумал, что ты хочешь визуализировать по-другому, а не просто показать / скрыть !! - person AltoDev; 11.11.2020
comment
Без проблем. Я просто хотел скрыть / показать первый (или любой другой элемент) в меню, управляя им с помощью внешней опоры. - person Richard Topchii; 11.11.2020