javascript - 将多级 JSON 菜单转换为多级 JSX/HTML 菜单

Question

我正在使用 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>

以下链接提供了解决方案:Turning nested JSON into an HTML nested list with Javascript .但是，这似乎不适用于 JSX，因为您不能将 document.createElement() 与 React/JSX 元素一起使用。

鉴于我正在使用多级菜单，在 React 中混合使用 JSX 和 html 元素的有效方法是什么？

Answer 1

这是一个动态生成的菜单，使用 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>