Question

尝试在.map函数中创建for循环时遇到麻烦。

我正在使用'Reactjs'和'Antd'。

我有一个getSubMenu函数，其中包含以下代码：

getSubMenu = (menuItem: any) => {
        let subMenus;
        if (menuItem.subMenu.length > 0) {
            let subMenu = [];
            for (let x = 0; x < menuItem.subMenu.length; x++) {
                subMenu.push(menuItem.subMenu[x]);
                this.getSubMenu(menuItem.subMenu[x]);
            }
                subMenus = <>
                    <Menu>
                    {subMenu.map((subMenu: any) =>
                    <SubMenu key={subMenu.id} title={subMenu.name}>
                        //THE FOR-LOOP SHOULD BE POSITIONED RIGHT HERE\\
                    </SubMenu>
                    )}
                    </Menu>
                </>
        }

我希望重复子菜单for-loop，直到返回每个子菜单的最后一个子菜单。

我尝试了以下操作，但这还是导致仍然以硬编码方式输入子菜单：

    getSubMenu = (menuItem: any) => {
        let subMenus;
        if (menuItem.subMenu.length > 0) {
            let subMenu = [];
            for (let x = 0; x < menuItem.subMenu.length; x++) {
                subMenu.push(menuItem.subMenu[x]);
                this.getSubMenu(menuItem.subMenu[x]);
            }
                subMenus = <>
                    <Menu>
                    {subMenu.map((subMenu: any) =>
                    <SubMenu key={subMenu.id} title={subMenu.name}>
                        {subMenu.subMenu.map((subMenu: any) =>
                        <SubMenu key={subMenu.id} title={subMenu.name}>
                            {subMenu.subMenu.map((subMenu: any) =>
                                <SubMenu key={subMenu.id} title={subMenu.name}>
                                    {subMenu.subMenu.map((subMenu: any) =>
                                        <SubMenu key={subMenu.id} title={subMenu.name}>
                                            ...
                                        </SubMenu>
                                    )}
                                </SubMenu>
                            )}
                        </SubMenu>
                        )}
                    </SubMenu>
                    )}
                    </Menu>
                </>
        }

有什么方法可以使我获得一个循环来获取所有子菜单，而不必对其进行硬编码？

谢谢！

Answer 1

您可以在.map中放入一个for循环，但是不能直接在JSX中放入一个for循环。

为此，我将允许Menu具有一个子菜单。

这使您的菜单可以递归。

interface MenuData {
    id: string;
    name: string;
    submenu?: MenuData;
};


const Menu = (props: MenuData) => {
    return (
        <div>
            ...
            {props.submenu &&
                <Menu
                    id={props.submenu.id}
                    name={props.submenu.name}
                    submenu={props.submenu.submenu}
                />
            }
        </div>
    )
}

.map React中的For循环

1 个答案: