Question

我的代码是建立一个菜单（将它们分为几组），如果1个组中未显示任何项目，则无需显示组的标题。

在跟随MenuList null时如何隐藏ListItem？谢谢

这是我的代码：

<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

您使用conditional rendering检查是否存在某个值，然后呈现该组件。

例如由于您正在映射item.data，因此我们将以此为条件进行检查。

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

Answer 2

您只需要执行此操作，使用三元运算符检查并构造一个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>

内容为空时如何隐藏/显示标题

2 个答案: