admin管理员组文章数量:1253714
I am using SmartMenus to create a drop down menu. 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. I am trying to figure out a way to convert the JSON code to HTML/JSX code:
The JSON code retrieved from the API will look something like this:
{
"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:
<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 . However, this does not seem to work well with JSX as you cannot use document.createElement() with React/JSX elements.
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?
I am using SmartMenus to create a drop down menu. 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. I am trying to figure out a way to convert the JSON code to HTML/JSX code:
The JSON code retrieved from the API will look something like this:
{
"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:
<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 . However, this does not seem to work well with JSX as you cannot use document.createElement() with React/JSX elements.
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?
Share Improve this question edited Sep 16, 2018 at 2:21 kojow7 asked Sep 15, 2018 at 22:29 kojow7kojow7 11.4k20 gold badges92 silver badges147 bronze badges 4- Do a search for "recursive tree ponent" – charlietfl Commented Sep 15, 2018 at 22:34
- @charlietfl One problem that I am encountering is JSX does not allow me to add child elements. – kojow7 Commented Sep 16, 2018 at 4:41
- This is what I am referring to here: stackoverflow./questions/41028198/… – kojow7 Commented Sep 16, 2018 at 5:28
- @kojow7 can you please check my implementation? Also if you have any further questions - feel free to write me a ment to the answer. – Jordan Enev Commented Sep 23, 2018 at 7:06
1 Answer
Reset to default 19 +50Here's a dynamically generated menu, using JSX and your sample data.
As you can see, we're recursively iterating over your menu items while building the 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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./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>本文标签： javascriptConverting a multilevel JSON menu to a multilevel JSXHTML menuStack Overflow
版权声明：本文标题：javascript - Converting a multi-level JSON menu to a multi-level JSXHTML menu - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1740777098a2284458.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论