隐藏没有二级菜单时的dom

src/layout/RootLayout.tsx

@@ -18,6 +18,7 @@ import type { MenuDataItem } from '@ant-design/pro-layout/es/typing'
 import { convertToMenu, flattenTree } from '@/utils'
 import { Flex, Menu, Space } from 'antd'
 import { MenuFoldOutlined, MenuUnfoldOutlined } from '@ant-design/icons'
+import { If } from 'react-if'
 
 //根据menuData生成Breadcrumb所需的数据
 const getBreadcrumbData = (menuData: MenuItem[], pathname: string) => {
@@ -186,49 +187,53 @@ export default () => {
                           }
                   >
 
-                    <Flex className={styles.childMenus}>
-                      {
-                              !collapsed && <div className={styles.childMenuTop}>
-                                <h2>{currentMenu?.title}</h2>
-                              </div>
-                      }
-
-                      <Menu
-                              mode={'inline'}
-                              inlineCollapsed={collapsed}
-                              selectedKeys={[ location.pathname ]}
-                              openKeys={openMenuKeys}
-                              onOpenChange={(keys) => {
-                                setOpenKeys(keys)
-                              }}
-                              onClick={(menu) => {
-                                const info = menusFlatten.current?.find(item => item.path === menu.key)
-                                if (info) {
-                                  setOpenKeys([ info.path as string ])
-                                  navigate({
-                                    to: info.path,
-                                  })
-                                }
-
-                              }}
-                              items={convertToMenu((childMenuRef.current || []), (item => {
-                                return {
-                                  ...item,
-                                  key: item.path,
-                                  label: item.title,
-                                }
-                              })) as any}
-                              style={!collapsed ? { width: 210 } : {}}
-                      />
-                      <div className={styles.childMenuBottom}
-                           onClick={() => {
-                             setCollapsed(!collapsed)
-                           }}>
+                    <If condition={childMenuRef.current?.length > 0}>
+                      <Flex className={styles.childMenus}>
                         {
-                          collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>
+                                !collapsed && <div className={styles.childMenuTop}>
+                                  <h2>{currentMenu?.title}</h2>
+                                </div>
                         }
-                      </div>
-                    </Flex>
+
+
+                        <Menu
+                                mode={'inline'}
+                                inlineCollapsed={collapsed}
+                                selectedKeys={[ location.pathname ]}
+                                openKeys={openMenuKeys}
+                                onOpenChange={(keys) => {
+                                  setOpenKeys(keys)
+                                }}
+                                onClick={(menu) => {
+                                  const info = menusFlatten.current?.find(item => item.path === menu.key)
+                                  if (info) {
+                                    setOpenKeys([ info.path as string ])
+                                    navigate({
+                                      to: info.path,
+                                    })
+                                  }
+
+                                }}
+                                items={convertToMenu((childMenuRef.current || []), (item => {
+                                  return {
+                                    ...item,
+                                    key: item.path,
+                                    label: item.title,
+                                  }
+                                })) as any}
+                                style={!collapsed ? { width: 210 } : {}}
+                        />
+                        <div className={styles.childMenuBottom}
+                             onClick={() => {
+                               setCollapsed(!collapsed)
+                             }}>
+                          {
+                            collapsed ? <MenuUnfoldOutlined/> : <MenuFoldOutlined/>
+                          }
+                        </div>
+                      </Flex>
+                    </If>
+
                     <Flex flex={1} className={styles.body} aria-description={'main-body'} vertical={true}>
                       <div className={styles.bodyHeader}>
                         <PageBreadcrumb