所以我想用服务器发送的内容来实现下面的图像。
我们可以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} /> }
});
这是您要找的东西吗?