estou usandoSmartMenus para criar um menu suspenso. No entanto, estou querendo criar o menu dinamicamente. O aplicativo React consultará o servidor API para obter o código JSON e um menu será construído com base nisso. Estou tentando descobrir uma maneira de converter o código JSON em código HTML / JSX:

O código JSON recuperado da API será mais ou menos assim:

{
        "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"
                }
        ]
}

Com base nesses dados JSON, gostaria de gerar o seguinte código 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>

O link a seguir oferece uma solução:Transformando JSON aninhado em uma lista aninhada HTML com Javascript . No entanto, isso parece não funcionar bem com JSX, pois você não pode usar document.createElement () com elementos React / JSX.

Como estou usando vários níveis de menus, qual é uma maneira eficiente de fazer isso no React com uma mistura de elementos JSX e html?