我已经建立了一个侧边栏3级下拉与使用材料用户界面“列表”,我面临的问题与第三级下拉所有的孩子一起打开,当我点击任何第二级下拉。我分享的第二和第三级代码样本,我想管理的下拉onClick事件工作分别在第二个下拉列表。
我想为个人onClick第二个层次的下拉解决方案。其中第三层打开相关onClick事件。
{
id: 'finance-management',
icon: <img src="/images/finance-mgt.svg" />,
name: 'Finance Management',
url: 'finance',
dropDown: [
{
id: "profit",
sublist: "Profit & Loss",
superSubList: [
{ superlist: "Payments"},
{ superlist: "Receivables"},
{ superlist: "Cashflow"},
{ superlist: "Profit & Loss Statement"},
]
},
{
id: "suppliers",
sublist: "Suppliers",
superSubList: [
{ superlist: "Overview"},
{ superlist: "Create New"}
]
}
]
},
----------------------------------------------------
const [sublistcl, setSubListcl] = useState();
const handleSubClick = () => {
setSubListcl(!sublistcl)
};
----------------------------------------------------
{menuItem?.dropDown?.map((menuSubItem) => (
<div className="sub-drop-down">
<Collapse in={open} >
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 4 }}
// onClick={isExpandable && handleSubClick}
onClick={handleSubClick}
key={menuSubItem.id}
>
<ListItemText primary={menuSubItem.sublist} />
{sublistcl ? <ExpandLess /> : <ExpandMore />}
{/* {sublistcl && !sublistcl && <ExpandMore />}
{sublistcl && sublistcl && <ExpandLess />} */}
</ListItemButton>
{/* Super Sub List Item */}
{menuSubItem?.superSubList?.map((itemThird) =>(
<div className="list-item-subchild">
<Collapse in={sublistcl} >
<List component="div" disablePadding>
<ListItemButton sx={{ pl: 5 }}>
<ListItemText primary={itemThird.superlist} />
</ListItemButton>
</List>
</Collapse>
</div>
))}
</List>
</Collapse>
</div>
))}
-----------------------------------------------
1条答案
按热度按时间new9mtju1#
问题中的代码示例将对象形状用于菜单选项,如下所示。这些对象形状使得重用相同的代码来处理层次结构中任何级别的菜单选项变得困难。它们还使得难以唯一地标识每个对象。下面是一些改进建议。
FirstLevelMenuOption对象形状
SecondLevelMenuOption对象形状
ThirdLevelMenuOption对象形状
建议:
1.所有三个级别都应该有一个
id
属性,用于唯一标识对象示例。1.用户选择的展开(或折叠)对象示例应该由对象的
id
属性表示。1.菜单选项的展开/折叠状态需要针对每个菜单选项独立地捕获,而不是针对整个菜单使用单个打开/关闭状态值。
1.如果可能,所有层次级别的菜单选项应具有相同的对象形状和相同的属性名称。
1.对象的原始数据结构应该使用对象属性(例如
parentId
属性),而不是对象树的硬编码多级结构。对象树可以从原始数据结构构建。Demo
带有可扩展MUI Drawer的live demo演示了如何使用MUI文档的Controlled树视图和ContentComponent prop示例。在演示中,单击导航菜单图标以打开抽屉。可以使用用于演示的code repository。
演示使用下面的对象形状用于所有级别的所有选项。请注意,
icon
属性现在是图标src
属性的字符串,而不是JSXElement。JSXElement可以通过在每个菜单选项上循环的代码从src属性创建(这在演示代码中没有显示)。