Javascript 反应递归的多级下拉列表

我正在构建一个多级菜单，并希望使用递归来显示菜单。类似于从中的多级下拉列表

在我的代码中，我的菜单如下所示

const menu = [
  {
    name: 'Man Utd',
    menu: [
       {
          name: 'Stadium'
       },
       {
          name: 'About'
       }
    ]
  },
  {
    name: 'Liverpool',
    menu: [
       {
           name: 'Contact'
       }
    ]
  }
];

然后我将其传递到我的react组件中

const Dropdown = ({ menu }) => {
    const renderMenu = (items) => {
        return items.map((item: any, index: any) => {
            return (
                <div>
                    {item.menu ? renderMenu() : item.name}
                </div>
            )
        })
    }

    return (renderMenu(menu));
}

const下拉菜单=（{menu}）=>{
const renderMenu=（项目）=>{
返回items.map（（item:any，index:any）=>{
返回(
{item.menu？renderMenu（）：item.name}
)
})
}
返回（renderMenu（菜单））；
}

这里的问题是它导致了一个无限循环

---

有人能告诉我如何改进吗？

您没有向renderMenu传递任何信息。您应该调用renderMenu（item.menu）

递归呈现菜单时，需要将

item.menu

作为参数传递给

renderMenu

示例

const菜单=[
{
姓名：“曼恩Utd”，
菜单：[
{
名称：“体育场”
},
{
姓名：“关于”
}
]
},
{
名称：“利物浦”，
菜单：[
{
姓名：“联系人”
}
]
}
];
常量下拉列表=（{menu}）=>{
const renderMenu=项目=>{
返回items.map（（item:any，index:any）=>{
返回(
{item.name}
{item.menu？renderMenu（item.menu）：null}
);
});
};
返回{renderMenu（菜单）}；
};
render（，document.getElementById（“根”））

这太好了，谢谢。知道隐藏辅助菜单的最佳方法吗。只在悬停上表演？@peterflanagan不客气！这有点复杂，但你可能可以实现它。啊，好吧，也许有一些更简单的东西我想不出来。如何使辅助菜单和下面的任何菜单显示：无？`-<代码>索引>0

不能像第一个菜单那样工作？有什么想法吗？谢谢again@peterflanagan回答完问题后请不要改变。如果你想不出来的话，你可以考虑创建一个新的问题。