如何在 React 组件中渲染嵌套的地图项

Question

我有一个基于某些 JSON 数据呈现的 React 导航组件。

我已成功呈现顶级项目，但我无法呈现二级子页面。

这就是我认为代码应该看起来的样子我也只想输出

标签有人能帮我用语法来实现这个吗？

    {headerData.TopLevelPages.map(toplevelPage => (
        <li key={toplevelPage.Id}>{toplevelPage.NavLinkText}</li>
    
         <ul>//Only out put UL If SubNavMenuItems as items
    
            {toplevelPage.SubNavMenuItems.map(sublevelPage => (
                   <li key={sublevelPage.Id}>{sublevelPage.NavLinkText}</li>
                 ))}
    
        <ul>

   ))}

Answer 1

    {headerData.TopLevelPages.map(toplevelPage => (
        <li key={toplevelPage.Id}>{toplevelPage.NavLinkText}</li>
    
    { toplevelPage.SubNavMenuItems && 
        ( <ul>//Only out put UL If SubNavMenuItems as items
    
            {toplevelPage.SubNavMenuItems.map(sublevelPage => (
                   <li key={sublevelPage.Id}>{sublevelPage.NavLinkText}</li>
                 ))}
    
        <ul>)
    }

   ))}

再做一次条件渲染

Answer 2

一个简单的递归函数就可以呈现任意深度的嵌套菜单。

像下面这样尝试。

const headerData = { TopLevelPages: [ { NavLinkText: "Text 1", Id: "1", SubNavMenuItems: [ { NavLinkText: "sub Text 1-1", Id: "1-1" }, { NavLinkText: "sub Text 1-2", Id: "1-2", SubNavMenuItems: [ { NavLinkText: "sub-sub Text 1-2-1", Id: "1-2-1" } ] } ] }, { NavLinkText: "Text 2", Id: "2" } ] };

function App() {
  
  const renderNavMenu = (menus) => {
    return menus.map(({ NavLinkText, Id, SubNavMenuItems }) => (
      <ul>
        {/* render current menu item */}
        <li key={Id}>{NavLinkText}</li>
        {/* render the sub menu items */}
        {SubNavMenuItems && <ul>{renderNavMenu(SubNavMenuItems)}</ul>}
      </ul>
    ));
  };

  return renderNavMenu(headerData.TopLevelPages);
}

ReactDOM.render(<App/>, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

如何在 React 组件中渲染嵌套的地图项

How to Render Nested Map Items inside react component

javascript

reactjs

react-component