javascript - 如何使用 ReactJs 在菜单项之间进行切换？

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

在菜单项 onClick 中使用 this.props.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;
};

您可以通过 onClick 传递 item 来访问特定的菜单项。