Question

我有树状（可能有不同数量的级别）结构，需要从中创建菜单。这是Menu组件和menuItem组件的主要方法：

    render() {
        return (
            <div className='Tema-menu-container'>                   
                <ul className='Tema-menuItems-list'>
                    <li className='Tema-menuItem'>
                        <a>
                            <Icon className='Tema-menuItem-iconBack' name='caret left' size='small'/> Back
                        </a>
                    </li>
                    {this.getMenuItems()}
                </ul>
            </div>


        )
    }

    getMenuItems= ( selectedItemId ) => {
        let  menu_items = [];
        let  items = this.items2;

        for(let group in  items) {
            for (let subgroup in  items[group]) {                   
                for(let group2 in  items[group][subgroup]) {                        
                    if(typeof items[group][subgroup][group2].id != 'undefined') {
                        menu_items.push(
                            <LeftSideMenuItem key     = {items[group][subgroup][group2].id}
                                              item    = {items[group][subgroup][group2]}
                                              onClick = { this.menuItemClick}
                            />
                        )
                    }
                }
            }
        }
        return menu_items;
    };

项目的组件。每个项目都有级别和子级别：

    render() {
        let {item} = this.props;                

        return (

                <li key={item.id}>
                    <a>
                        {item.title} <Icon  name='angle right' size='small'/>
                    </a>
                    <ul className='Tema-subMenuItems-list'>
                        {this.getGroups(item.groups)}
                        {this.getMeasures(item.measures)}
                    </ul>
                </li>
        )
    }

    getGroups = (groups) => {
        let groupsSubMenu = [];
        if (groups.length != 0) {               
                groups.forEach((item, i, groups) =>{
                console.log(item);
                groupsSubMenu.push(
                    <li key={item.id}>
                        <a>
                            { item.title } <Icon  name='angle right' size='small' />
                        </a>
                    </li>
                );
            });
        }
        return groupsSubMenu;
    };

    getMeasures = (measures) => {
        let measuresSubMenu = [];
        if (measures.length != 0) {
            measures.forEach((item, i, measures) =>{
                console.log(item);
                measuresSubMenu.push(
                    <li key={item.id} >
                        <a>
                            { item.title } <Icon  name='angle right' size='small' />
                        </a>
                    </li>
                );
            });
        }
        return measuresSubMenu;
    }
}

我需要制作像itemClick这样的东西，它允许在菜单级别之间移动，但我不知道如何在逻辑上执行它，我对我的代码有疑问。我该如何组织它？

Answer 1

在菜单项yarn logs -applicationId <application>或其他方法中使用this.props.onClick，

onClick

您可以通过getGroups = (groups) => { let groupsSubMenu = []; if (groups.length != 0) { groups.map((item, i) => groupsSubMenu.push( <li key={item.id} onClick={this.props.onClick}> <a>{ item.title } <Icon name='angle right' size='small' /></a> </li> )); } return groupsSubMenu; };传递项目以访问特定的菜单项。

如何使用ReactJs在菜单项之间切换？

1 个答案: