如何在JavaScript中创建嵌套菜单？

Question

所以我想要实现下面的图片，但是要从服务器发送内容。

我们可以set menu items

const items = [
  { key: 'editorials', active: true, name: 'Editorials' },
  { key: 'review', name: 'Reviews' },
  { key: 'events', name: 'Upcoming Events' },
]
//...
    <Menu vertical color='black' items={items}>

    </Menu>

但是，我没有看到如何嵌套它们。只需将项目“内容”设置为某些XML即可。

如何在Javacript的ReactJS\Semantic-UI中创建包含多个嵌套部分的菜单？

Answer 1

我会创建以下组件：

1. <MenuContainer /> - ＆gt;我们的根组件

2. <Menu></Menu> - ＆gt;可以呈现自身（<Menu />）或<Item />组件

3. <Item></Item> - ＆gt;只能呈现<li />或smth

假设我们的服务器有以下JSON：

{
  label: 'Some menu',
  children: [{ label: 'Sub menu', children: [...] }, ...],
}

假设当我们在JSON中找到一个数组时，这意味着我们必须渲染一个菜单。如果我们有一个对象，我们渲染一个简单的孩子。一个粗略的算法是：

const MenuContainer = ({items}) => ({
   {items.map(item => item.items ? <Menu items={items} /> : <Item data={item} /> }
});

这是你要找的东西吗？