如何在内容为空时 hide/show 标题

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

你只需要这样做，使用三元运算符检查并构造一个常量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>

如何在内容为空时 hide/show 标题

How to hide/show title when content null

reactjs

react-admin