Estoy tratando de generar un menú dinámico basado en ubicaciones proporcionadas en una matriz de matrices.
Lo que estoy tratando de lograr:
Estructura del menú como esta:
Location 1 |_ sub-location 1 |_ sub-location 2 |_ floor 1 |_ floor 2 Location 2 |_ sub-location 1etc, etc. El menú tiene que ser dinámico ya que no sé de antemano qué lugares estarán presentes.
Las ubicaciones se proporcionan en una matriz de matrices. Cada matriz en la matriz contiene la ruta completa para una ubicación, por ejemplo
[ ["Location 1"], ["Location 1", "sub-location 1"], ["Location 1", "sub-location 2", "floor 1"] ["Location 1", "sub-location 2", "floor 2"] ]En muchos casos, habrá duplicados.
Estoy tratando de encontrar una forma inteligente de condensar esto en alguna forma de renderizarlo con React. Estoy usando un componente de menú de Antd.
Estoy luchando para obtener una matriz que se ajuste al modelo, ya que no veo cómo estructurarlo de una manera que permita una cantidad arbitraria de submenús y elementos de menú.
¿Podría de alguna manera convertirse en un objeto o algo similar? Todavía bastante nuevo en React y javascript.
Si alguien pudiera proporcionar alguna orientación, ¡sería muy útil!
Esta estructura podría ser más comprensible y fácil de trabajar.
{ name: 'Location 1', sub: [ { name: 'sub-location 1', sub: [ { name: 'floor 1' }, { name: 'floor 2' }, ] } ] } Llamemos a la estructura anterior un elemento de menuItem único. Ahora puede tener una variedad de menús como este
const menuItems = [menuItem1, menuItem2, ....]Usa este código para transformar tus datos
const badMenu = [ ['Location 1'], ['Location 1', 'sub-location 1'], ['Location 1', 'sub-location 2', 'floor 1'], ['Location 1', 'sub-location 2', 'floor 2'], ['Location 2', 'sub-location 2', 'floor 2'], ['Location 2', 'sub-location 2', 'floor 2'], ]; const func = (array, menu) => { const name = array[0]; if (!name) { return; } let selected = menu.find((menuItem) => menuItem.name == name); if (!selected) { selected = { name, sub: [] }; menu.push(selected); } func(array.slice(1), selected.sub); }; let newMenu = []; for (let i = 0; i < badMenu.length; i++) { const menuList = badMenu[i]; func(menuList, newMenu); } console.log(JSON.stringify(newMenu, null, 4)); Para renderizar este menú usando antd :
const renderMenu = (menu, i) => { if (menu.sub && menu.sub.length) { return ( <Menu.SubMenu key={menu.name + i} title={menu.name}> {menu.sub.map(renderMenu)} </Menu.SubMenu> ); } return <Menu.Item key={menu.name + i}>{menu.name}</Menu.Item>; }; function App() { return <Menu>{menu.map(renderMenu)}</Menu>; }