将多级JSON菜单转换为多级JSX / HTML菜单
我正在使用SmartMenus创建一个下拉菜单。但是，我想动态创建菜单。React应用程序将向API服务器查询JSON代码，并从中构建一个菜单。我试图找出一种将JSON代码转换为HTML
/ JSX代码的方法：
从API检索到的JSON代码如下所示：
{
"module_type": "menu",
"title": "My Site",
"menu": [
{
"link": "/home",
"title": "Home"
},
{
"link": "#",
"title": "Fruit",
"menu": [
{
"link": "/apples",
"title": "Apples"
},
{
"link": "/bananas",
"title": "Bananas"
},
{
"link": "/kiwi",
"title": "Kiwi"
},
{
"link": "/pears",
"title": "Pears"
}
]
},
{
"link": "#",
"title": "Vegetables",
"menu": [
{
"link": "/carrots",
"title": "Carrots"
},
{
"link": "/celery",
"title": "Celery"
},
{
"link": "/potatoes",
"title": "Potatoes"
},
{
"link": "#",
"title": "More",
"menu": [
{
"link": "/thirdlevel1",
"title": "3rd level menu"
},
{
"link": "/thirdlevel2",
"title": "3rd level two"
}
]
}
]
},
{
"link": "/about",
"title": "About"
},
{
"link": "/contact",
"title": "Contact"
}
]
}
基于此JSON数据，我想生成以下HTML / JSX代码：
<nav className="main-nav" role="navigation">
<input id="main-menu-state" type="checkbox" />
<label className="main-menu-btn" htmlFor="main-menu-state">
<span className="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<h2 className="nav-brand"><a href="#">My Site</a></h2>
<ul id="main-menu" className="sm sm-blue">
<li className="nav-item"><Link to="/">Home</Link></li>
<li><a href="#">No Fruit</a>
<ul>
<li><Link to="/apples">Apples</Link></li>
<li><Link to="/bananas">Bananas</Link></li>
<li><Link to="/kiwi">Kiwi</Link></li>
<li><Link to="/pears">Pears</Link></li>
</ul>
</li>
<li><a href="#">Vegetables</a>
<ul>
<li className="nav-item"><Link to="/carrots">Carrots</Link></li>
<li className="nav-item"><Link to="/celery">Celery</Link></li>
<li className="nav-item"><Link to="/potatoes">Potatoes</Link></li>
<li><a href="#">more...</a>
<ul>
<li><a href="#>3rd level menu</a></li>
<li><a href="#>3rd level two</a></li>
</ul>
</li>
</ul>
</li>
<li className="nav-item"><Link to="/about">About</Link></li>
<li className="nav-item"><Link to="/contact">Contact</Link></li>
</ul>
</nav>
鉴于我正在使用多个级别的菜单，在React中混合使用JSX和html元素的有效方法是什么？
问题答案：
这是使用JSX和示例数据动态生成的菜单。
如您所见，我们在构建JSX时递归地遍历您的菜单项：
const renderMenu = items => {
return <ul>
{ items.map(i => {
return <li>
<a href={i.link}>{ i.title }</a>
{ i.menu && renderMenu(i.menu) }
</li>
})}
</ul>
}
const Menu = ({ data }) => {
return <nav>
<h2>{ data.title }</h2>
{ renderMenu(data.menu) }
</nav>
}
ReactDOM.render(
<Menu data={data} />,
document.getElementById('container')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script>
// The sample data is declared here, only to keep the React example short and clear
const data = {
"module_type": "menu",
"title": "My Site",
"menu": [{
"link": "/home",
"title": "Home"
},
{
"link": "#",
"title": "Fruit",
"menu": [{
"link": "/apples",
"title": "Apples"
},
{
"link": "/bananas",
"title": "Bananas"
},
{
"link": "/kiwi",
"title": "Kiwi"
},
{
"link": "/pears",
"title": "Pears"
}
]
},
{
"link": "#",
"title": "Vegetables",
"menu": [{
"link": "/carrots",
"title": "Carrots"
},
{
"link": "/celery",
"title": "Celery"
},
{
"link": "/potatoes",
"title": "Potatoes"
},
{
"link": "#",
"title": "More",
"menu": [{
"link": "/thirdlevel1",
"title": "3rd level menu"
},
{
"link": "/thirdlevel2",
"title": "3rd level two"
}
]
}
]
},
{
"link": "/about",
"title": "About"
},
{
"link": "/contact",
"title": "Contact"
}
]
}
</script>
<div id="container"></div>
-
本文向大家介绍Bootstrap3多级下拉菜单，包括了Bootstrap3多级下拉菜单的使用技巧和注意事项，需要的朋友参考一下 本文实例为大家分享了Bootstrap下拉菜单的具体代码，供大家参考，具体内容如下 效果图： - 需要引用bootstrap.min.css和bootstrap.min.css.js - 代码如下 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持呐喊教
-
问题内容： 通过使用twitter bootstrap 2的元素，可以有一个多级下拉菜单吗？原始版本没有此功能。 问题答案： 更新的答案 更新了支持v2.1.1 *引导程序版本样式表的答案。 **但是请小心，因为此解决方案已从v3中删除 只是想指出一点，因为最新的引导程序现在默认支持多级下拉菜单，因此不再需要此解决方案。如果您使用的是旧版本，则仍然可以使用它，但对于那些已更新到最新版本（在撰写本文
-
问题内容： 以前，我没有对多级纯CSS下拉菜单进行过很多工作，但是现在我正在寻找最干净的方法。当我搜索了这个网上我发现了很多那名4-5岁的解决方案，我不知道是否有更好的方法来实现这一目标，而不是做一些这样的。 问题答案： .third-level-menu 我还整理了一个现场演示，可在此处使用
-
本文向大家介绍vue实现多级菜单效果，包括了vue实现多级菜单效果的使用技巧和注意事项，需要的朋友参考一下 本次记录基于iview3框架实现多级菜单+vue router实现页面切换 方法一： 使用Tree 树形控件，官方文档 以官方demo为例，数据中添加URL属性，用于路由跳转，正式项目中该tree控件的数据由后端给出，需要注意的是后端给出的URL跳转地址最前一定要看清有没有"/" ，如果没有
-
型号： 控制器： 查看： 表结构： 它只显示2个级别，但我需要多个级别，请帮助！
-
el-menu实现无线多层级的菜单数据过滤，菜单显示与不显示是后台可配置的，根据一个定义好的状态字段来显示，status为0不显示，反之显示。 LeftMenuTree.vue组件： 组件中使用： 后端返回的数据结构如下： 这个时候就需要根据menuStatus状态值来显示，于是写了一个方法： 但是过滤的不彻底，层级太多，就过滤不了，即使过滤了也还会显示菜单下拉项箭头。 求教大家对于层级太多的菜单