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

Question

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

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

    </Menu>

但是，我不知道如何嵌套它们。只需将项目 'content' 设置为某些 XML.

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

Answer 1

我将创建以下组件：

<MenuContainer /> -> 我们的根组件
<Menu></Menu> -> 可以渲染自身 (<Menu />) 或 <Item /> 组件
<Item></Item> -> 只能渲染一个 <li /> 或 smth

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

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

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

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

这是您要找的东西吗？

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

How to create a nested menu in JavaScript?

javascript

json

reactjs

semantic-ui

semantic-ui-react