2023-4-14 前端達人
以下是一個使用React開發(fā)的左側(cè)三級菜單的基本示例:
import React, { useState } from 'react'; const Menu = () => { const [menuItems, setMenuItems] = useState([ { id: 1, name: 'Menu Item 1', subMenuItems: [ { id: 1, name: 'Sub-menu Item 1' }, { id: 2, name: 'Sub-menu Item 2' } ] }, { id: 2, name: 'Menu Item 2', subMenuItems: [ { id: 3, name: 'Sub-menu Item 3' }, { id: 4, name: 'Sub-menu Item 4' } ] } ]); const [selectedMenuItem, setSelectedMenuItem] = useState(null); const [selectedSubMenu, setSelectedSubMenu] = useState(null); const handleMenuItemClick = (menuItem) => { setSelectedMenuItem(menuItem.id); setSelectedSubMenu(null); }; const handleSubMenuClick = (subMenuItem) => { setSelectedSubMenu(subMenuItem.id); }; return ( <div className="menu"> {menuItems.map((menuItem) => ( <div key={menuItem.id}> <button onClick={() => handleMenuItemClick(menuItem)}> {menuItem.name} </button> {selectedMenuItem === menuItem.id && ( <ul> {menuItem.subMenuItems.map((subMenuItem) => ( <li key={subMenuItem.id}> <button onClick={() => handleSubMenuClick(subMenuItem)}> {subMenuItem.name} </button> {selectedSubMenu === subMenuItem.id && ( <ul> <li>Sub-menu item details</li> </ul> )} </li> ))} </ul> )} </div> ))} </div> ); }; export default Menu;
藍藍設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進入一起成長學(xué)習(xí),請加微信ban_lanlan,報下信息,藍小助會請您入群。歡迎您加入噢~~
希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系01063334945。
分享此文一切功德,皆悉回向給文章原作者及眾讀者. 免責(zé)聲明:藍藍設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍藍設(shè)計( sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司。
藍藍設(shè)計的小編 http://sillybuy.com