所以我想用服务器发送的内容来实现下面的图像。



我们可以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中创建带有多个嵌套部分的菜单?

最佳答案

我将创建以下组件:


<MenuContainer />->我们的根组件
<Menu></Menu>->可以呈现自身(<Menu />)或<Item />组件
<Item></Item>->只能渲染<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} /> }
});


这是您要找的东西吗?

10-01 18:25
查看更多