0
199
Vistas¿Cómo puedo crear una lista desordenada en reacción basada en una matriz de objetos?
Tengo una matriz de objetos cuyo esquema es algo como esto.
[ { text: 'Contents', level: 2 }, { text: 'h2 Heading', level: 2 }, { text: 'h3 Heading', level: 3 }, { text: 'h4 Heading', level: 4 }, { text: 'Heading', level: 2 }, ]Quiero crear una lista desordenada basada en los niveles de cada objeto. Entonces, por ej. la matriz anterior debe mostrarse como:
<ul> <li>Contents</li> <li> h2 Heading <ul> <li> h3 Heading <ul> <li>h4 Heading</li> </ul> </li> </ul> </li> <li>Heading</li> </ul>Puedo comprobar si el siguiente objeto tiene el mismo nivel que el anterior. Y maneje las consultas en consecuencia, pero ¿hay una solución mejor? O cualquier solución que funcione correctamente.
Edición n. ° 1: Justo ahora, encontré una solución que se solicitó aquí hace unos 13 años. Puedo diseñar los elementos dándole una percepción de una lista anidada. Enlace: Producir jerarquía de encabezados como lista ordenada
Aún así, si hay una solución mejor, responda.
1 Respuestas
Responde la pregunta0
Esta es una posible solución. Puede consultar este enlace para obtener un editor de código en línea reactivo.
const objects = [ { text: "Contents", level: 2 }, { text: "h2 Heading", level: 2 }, { text: "h3 Heading", level: 3 }, { text: "h4 Heading", level: 4 }, { text: "Heading", level: 2 } ]; const getDisplayableObjects = () => { const arr = []; let targetArr; for (const obj of objects) { const { text, level } = obj; switch (level) { case 2: arr.push({ text, children: [] }); break; case 3: targetArr = arr[arr.length - 1].children; targetArr.push({ text, children: [] }); break; case 4: targetArr = arr[arr.length - 1].children; targetArr = targetArr[targetArr.length - 1].children; targetArr.push({ text, children: [] }); break; default: break; } } return arr; }; const App = () => { return ( <> {getDisplayableObjects().map(({ text, children }) => ( <ul> <li> {text} {children.map(({ text, children }) => ( <ul> <li>{text}</li> {children.map(({ text, children }) => ( <ul> <li>{text}</li> </ul> ))} </ul> ))} </li> </ul> ))} </> ); }; export default App;Resultado:
