элемент. Как вы можете видеть, вы можете легко изменить все, что вы хотите в сгенерированной структуре с моим примером кода. Также мой ответ предоставляет четкий способ генерации JSX из вложенного JSON, поэтому, если вам это помогло, вы можете принять и наградить его. Благодарю. О взаимодействии - вы можете опубликовать еще один вопрос, потому что здесь основное внимание уделяется созданию JSX из JSON.
ользуюSmartMenus создать выпадающее меню. Однако я хочу создать меню динамически. Приложение React запросит у API-сервера код JSON, и из этого будет создано меню. Я пытаюсь выяснить способ преобразования кода JSON в код HTML / JSX:
Код JSON, полученный из API, будет выглядеть примерно так:
{
"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>
Следующая ссылка предлагает решение:Превращение вложенного JSON в вложенный список HTML с помощью Javascript , Однако это не очень хорошо работает с JSX, поскольку вы не можете использовать document.createElement () с элементами React / JSX.
Учитывая, что я использую несколько уровней меню, какой эффективный способ сделать это в React со смесью элементов JSX и HTML?