Как скрыть / показать заголовок при нулевом содержании

Question

Мой код состоит в том, чтобы создать меню (они разделены на несколько групп), и если 1 группа без какого-либо элемента отображается, заголовок группы отображать не нужно.

Как скрыть ListItem при следующемMenuList пусто?Спасибо

Это мой код:

<ListItem className="group-menu-title"> "Basic"  </ListItem>
<MenuList
           children={item.data.map(
           (link) => {
           var resource = getResourceByLink(link, resources);
           if (resource != null) {
               resource.icon = typeof (resource.icon) === 'undefined' ? DefaultIcon : resource.icon;
               var icon = createElement(resource.icon)
               var label = resource.options.label ? resource.options.label : resource.name
               return <WithPermissions
                        render={({ permissions }) => (
                         isShow(permissions) ?
                               <MenuItemLink
                                     className={classes.menuItem}
                                     to={link}                                                           
                                      primaryText={label}
                                     leftIcon={icon}
                                      onClick={onMenuClick} />
                                : null
                         )}
                     />
              }
              })}>
     </MenuList>

Answer 1

Вам просто нужно сделать это, использовать троичный оператор , проверить и создать const ListItem.

const ListItem = item.data.length > 0 ? <ListItem className="group-menu-title"> "Basic"  </ListItem> : null;

, затем связать его как {ListItem}, также это происходитвыглядеть аккуратно.

{ListItem} // this is gonna be null if there is no data//
<MenuList
           children={item.data.map(
           (link) => {
           var resource = getResourceByLink(link, resources);
           if (resource != null) {
               resource.icon = typeof (resource.icon) === 'undefined' ? DefaultIcon : resource.icon;
               var icon = createElement(resource.icon)
               var label = resource.options.label ? resource.options.label : resource.name
               return <WithPermissions
                        render={({ permissions }) => (
                         isShow(permissions) ?
                               <MenuItemLink
                                     className={classes.menuItem}
                                     to={link}                                                           
                                      primaryText={label}
                                     leftIcon={icon}
                                      onClick={onMenuClick} />
                                : null
                         )}
                     />
              }
              })}>
     </MenuList>

Answer 2

Вы используете условный рендеринг , чтобы проверить, существует ли определенное значение, а затем выполните рендеринг компонента.

Например, поскольку вы отображаете item.data, мы будем использовать это как условие дляпроверить для.

{item.data.length > 0 && ( 
  <ListItem className="group-menu-title">
    "Basic"
  </ListItem> 
)}