react + antd Menu 點擊菜單，收起其他展開的所有菜單

獻出螞蟻金服Ui官網：https://ant.design/components/menu-cn/

antd UI  結合 react 很巧的一個搭配

react更具象化的編程路數 

配合antd ui控件事件

很有趣

這是坐的一個小demo 

大體用了

import {

Menu,

Icon，Layout,

Icon,Avatar, Badge, Tooltip, Input
} from 'antd'

左側導航欄

<menu>   ----左側大盒

　　<Menu.SubMenu>  --- 父級菜單組

　　　　<Menu.Item>  ---父級菜單展開后的內容　

                  <Link to={pathNew}>  ---------點擊之后 通過匹配路由

 顯示相應內容

 

                       {icon && <Icon type={icon}/>}

                       <span>{title}</span>

                  </Link>

              </Menu.Item

> 

　　</Menu.SubMenu>

</menu>

 

 

.map類似vue中v-for 渲染出需要顯示的頁面

return 判斷父級菜單有無子組件item

父級菜單

父級子菜單

接下來需要解決的一個問題就是 父級菜單只允許一個展開 只展示最新的點開的子組件  上一個則關閉

日前：

思路 利用點擊父級菜單觸發的事件 以及返回的參數 實現效果

點擊帶有子組件的父級菜單才會觸發 

onOpenChange 

返回的是父級菜單配置的path

每次點擊只需要將最新的那一個path記錄在數組中即可

 STEP----

限制為一個展開 

點擊菜單，收起其他展開的所有菜單，保持菜單聚焦簡潔，避免真實數據下 數據點選重復 造成不必要的麻煩.

ps:僅限三級菜單 如若子級下子級下還有 就over bye了