@@ -4,67 +4,54 @@ import React from 'react';
44import Menu , { SubMenu , Item as MenuItem , Divider } from 'rc-menu' ;
55import '../../assets/index.less' ;
66
7- export default ( ) => {
8- const [ destroy , setDestroy ] = React . useState ( false ) ;
9-
10- function handleSelect ( info ) {
11- console . log ( 'selected ' , info ) ;
7+ const menu1List = [
8+ {
9+ titleLocalKey : "Properties" ,
10+ key : "Properties"
11+ } ,
12+ {
13+ titleLocalKey : "Resources" ,
14+ key : "Resources" ,
15+ children : [
16+ {
17+ titleLocalKey : "FAQ" ,
18+ key : "Faq" ,
19+ isSub : true
20+ } ,
21+ {
22+ titleLocalKey : "Learn" ,
23+ key : "Learn" ,
24+ isSub : true
25+ }
26+ ]
27+ } ,
28+ {
29+ titleLocalKey : "About Us" ,
30+ key : "AboutUs"
1231 }
32+ ] ;
1333
14- function handleClick ( info ) {
15- console . log ( 'click ' , info ) ;
34+ const menu1Items = ( values ) => {
35+ if ( ! values ) {
36+ return undefined ;
1637 }
17-
18- const titleRight = < span > sub menu</ span > ;
19- const titleRight1 = < span > sub menu 1</ span > ;
20- const titleRight2 = < span > sub menu 2</ span > ;
21- const titleRight3 = < span > sub menu 3</ span > ;
22-
23- const leftMenu = (
24- < Menu onSelect = { handleSelect } defaultActiveFirst onClick = { handleClick } >
25- < SubMenu title = { titleRight } key = "1" >
26- < MenuItem key = "1-1" > 0-1</ MenuItem >
27- < MenuItem key = "1-2" > 0-2</ MenuItem >
28- </ SubMenu >
29- < MenuItem >
30- < a href = "http://taobao.com" target = "_blank" rel = "noopener noreferrer" >
31- i do not need key
32- </ a >
33- </ MenuItem >
34- < MenuItem key = "3" > outer</ MenuItem >
35- < SubMenu title = { titleRight1 } key = "4" >
36- < MenuItem key = "4-1" > inner inner</ MenuItem >
37- < Divider />
38- < SubMenu key = "4-2" title = { titleRight2 } >
39- < MenuItem key = "4-2-1" > inn</ MenuItem >
40- < SubMenu title = { titleRight3 } key = "4-2-2" >
41- < MenuItem key = "4-2-2-1" > inner inner</ MenuItem >
42- < MenuItem key = "4-2-2-2" > inner inner2</ MenuItem >
43- </ SubMenu >
44- </ SubMenu >
45- </ SubMenu >
46- < MenuItem disabled > disabled</ MenuItem >
47- < MenuItem key = "4-3" > outer3</ MenuItem >
48- </ Menu >
49- ) ;
50-
51- return (
52- < div >
53- < h2 > single selectable menu</ h2 >
54-
55- < p >
56- < button
57- type = "button"
58- onClick = { ( ) => {
59- setDestroy ( true ) ;
60- } }
61- >
62- destroy
63- </ button >
64-
65- < a href = "#" > archor</ a >
66- </ p >
67- { ! destroy && < div style = { { width : 400 } } > { leftMenu } </ div > }
68- </ div >
69- ) ;
38+ return values . map ( ( item , index ) => {
39+ return {
40+ label : < div > { item . titleLocalKey } </ div > ,
41+ key : item . key ,
42+ children : menu1Items ( item . children )
43+ } ;
44+ } ) ;
7045} ;
46+
47+ console . log ( menu1Items ( menu1List ) ) ;
48+
49+ export default ( ) => (
50+ < Menu
51+ selectable = { false }
52+ mode = "inline"
53+ defaultOpenKeys = { "Resources" }
54+ style = { { width : "100%" } }
55+ items = { menu1Items ( menu1List ) }
56+ />
57+ )
0 commit comments