Tengo un componente de navegación de reacción que se representa en función de algunos datos JSON.
He renderizado con éxito los elementos de nivel superior, pero tengo problemas para renderizar las subpáginas de segundo nivel.
Así es como creo que debería verse el código. También solo quiero el
{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> ))}Una función recursiva simple puede generar un menú anidado con cualquier profundidad.
Prueba como a continuación.
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> {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>) } ))}hacer una representación condicional una vez más