代码之家 › 专栏 › 技术社区 › DuckQueen

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

semantic-ui-react semantic-ui reactjs json javascript

DuckQueen · 技术社区 · 9 年前

enter image description here

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。

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

1 回复 | 直到 9 年前

Andrei CACIO 9 年前

<MenuContainer /> -&燃气轮机;我们的根组件
<Menu></Menu> <Menu /> )或者 <Item /> 组成部分
<Item></Item> -&燃气轮机;只能渲染 <li /> 或smth

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

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

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

这是你要找的东西吗?

推荐文章

MachoBoy · 如何使用redux子空间重用具有相同动作的reducer

9 年前

merrilj · Reactjs-在动态元素渲染中向输入添加ref

9 年前

DuckQueen · 如何为react重新创建带有语义ui的自动折叠菜单?

9 年前

Tzvetlin Velev · 如何使用语义的React表组件从表行单击中获取数据

9 年前

DuckQueen · 如何在JavaScript中创建嵌套菜单?

9 年前

Dan · 如何设置语义UI下拉列表大小以匹配按钮等

9 年前

amir · 使用javascript更改图标标记

9 年前

rimraf · 从语义用户界面反应下拉菜单中删除插入符号

9 年前

Tyler Chong · 有没有办法通过语义用户界面获得动态图标?

9 年前

stevenlacerda · 我无法在语义使用react中关闭模式和调光器

9 年前