React JS - 多級下拉菜單

Question

我有這個例子。 我的問題很簡單：如何一次只打開一個子菜單？

例如：當“菜單 3”打開時，我希望“菜單 2”關閉..

Answer 1

使用單個值代替activeMenus state 的數組，如果沒有打開菜單，則可以是null 。 （並將名稱更改為activeMenu 。）

在handleArrowClick中，如果它已經menuName ， menuName activeMenu 設置為null ，否則設置activeMenu 。

setActiveMenu(activeMenu === menuName? null: menuName)

渲染SubMenu時， toggle={activeMenu === menuName}