Bonjour,
Je souhaite créer un menu avec sous menu dans mon application.
Pour cela, j'ai un fichier de route :
Dans ma page menu, j'ai la méthode componentDidMount qui lit mon fichier de route et qui ajoute dans le state pour chaque menu principaux un booléen :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61 const dashboardRoutes = [ { sidebarName: "menu1", code: "MENU1", icon: "content_paste", subMenus:[ { subMenu: true, private: true, path: "/private/table", sidebarName: "MENU1_SUBMENU1", navbarName: "MENU1_SUBMENU1", code: "MENU1_SUBMENU1", icon: "content_paste", component: TableList }, { subMenu: true, private: true, path: "/private/table", sidebarName: "MENU1_SUBMENU2", navbarName: "MENU1_SUBMENU2", code: "MENU1_SUBMENU2", icon: "content_paste", component: TableList } ] }, { sidebarName: "MENU2", code: "MENU2", icon: "content_paste", subMenus:[ { subMenu: true, private: true, path: "/private/table", sidebarName: "MENU2_SUBMENU1", navbarName: "MENU2_SUBMENU1", code: "MENU2_SUBMENU1", icon: "content_paste", component: TableList }, { subMenu: true, private: true, path: "/private/table", sidebarName: "MENU2_SUBMENU2", navbarName: "MENU2_SUBMENU2", code: "MENU2_SUBMENU2", icon: "content_paste", component: TableList } ] }, { redirect: true, path: "/private", to: "/private/dashboard" } ];
openSubMenuMENU1 : false
openSubMenuMENU2 : false
Mon problème c'est comment récupérer au niveau de mon html le state qui correspond au CODE.
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11 componentDidMount(){ {this.props.routes.map((prop, key) => { if(prop.subMenus != null){ const openSubMenuName = 'openSubMenu'+prop.code; this.setState({ [openSubMenuName]:true }); } })} }
Par exemple, je veut récupérer openSubMenuMENU2
Je construit mon menu de manière dynamique en parcourant mon fichier de route:
Par exemple, je voudrais récupérer l'état dans le state pour la ligne suivante dans le IN :
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37 return ( <div key={key}> <ListItem button className={listItemClasses} onClick= {prop.subMenus != null ? this.handleClick : null} > <ListItemIcon className={this.props.classes.itemIcon + whiteFontClasses}> {typeof prop.icon === "string" ? ( <Icon>{prop.icon}</Icon> ) : ( <prop.icon /> )} </ListItemIcon> <ListItemText id={prop.code} primary={this.props.t(prop.sidebarName)} className={this.props.classes.itemText + whiteFontClasses} disableTypography={true} /> {prop.subMenus != null ? this.handleOpenSubMenu ? <ExpandLess /> : <ExpandMore /> : null} </ListItem> {prop.subMenus != null ? ( <Collapse in={this.state.prop.code} timeout="auto" unmountOnExit> <List component="div" disablePadding> {prop.subMenus.map((propSubMenu, keySubMenu) => { if(propSubMenu.path !== undefined) return this.buildListItemWithNavLink(propSubMenu, keySubMenu, activePro, listItemClasses, whiteFontClasses); else return this.buildListItemWithoutNavLink(propSubMenu, whiteFontClasses); })} </List> </Collapse> ) : null} </div> );
prop correspond à un élément de mon fichier de route. par exemple à ceci :
Code : Sélectionner tout - Visualiser dans une fenêtre à part <Collapse in={this.state.prop.code} timeout="auto" unmountOnExit>
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27 { sidebarName: "menu1", code: "MENU1", icon: "content_paste", subMenus:[ { subMenu: true, private: true, path: "/private/table", sidebarName: "MENU1_SUBMENU1", navbarName: "MENU1_SUBMENU1", code: "MENU1_SUBMENU1", icon: "content_paste", component: TableList }, { subMenu: true, private: true, path: "/private/table", sidebarName: "MENU1_SUBMENU2", navbarName: "MENU1_SUBMENU2", code: "MENU1_SUBMENU2", icon: "content_paste", component: TableList } ] },
Partager