javascript - 如何在 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 /> -> 我们的根组件

2. <Menu></Menu> -> 可以渲染自身( <Menu /> )或 <Item />组件

3. <Item></Item> -> 只能渲染 <li />或者……

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

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

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

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

这是您正在寻找的东西吗？