[英]Converting a multi-level JSON menu to a multi-level JSX/HTML menu
I am using SmartMenus to create a drop down menu. 我正在使用SmartMenus创建一个下拉菜单。 However, I am wanting to create the menu dynamically. 但是,我想动态创建菜单。 The React app will query the API server for JSON code and a menu will be constructed out of that. React应用程序将在API服务器中查询JSON代码,并将构建一个菜单。 I am trying to figure out a way to convert the JSON code to HTML/JSX code: 我试图找到一种方法将JSON代码转换为HTML / JSX代码:
The JSON code retrieved from the API will look something like this: 从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"
}
]
}
Based on this JSON data, I would like to generate the following HTML/JSX code: 基于此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>
The following link offers a solution: Turning nested JSON into an HTML nested list with Javascript . 以下链接提供了一种解决方案: 使用Javascript将嵌套的JSON转换为HTML嵌套列表 。 However, this does not seem to work well with JSX as you cannot use document.createElement() with React/JSX elements. 但是,这似乎不适用于JSX,因为您不能将document.createElement()与React / JSX元素一起使用。
Given that I am using multiple levels of menus, what is an efficient way to do this in React with a mix of JSX and html elements? 鉴于我正在使用多级菜单,在React中使用混合的JSX和html元素执行此操作的有效方法是什么?
Here's a dynamically generated menu, using JSX and your sample data. 这是一个动态生成的菜单,使用JSX和您的示例数据。
As you can see, we're recursively iterating over your menu items while building the 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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.