0
153
Vistasrenderizar objeto anidado después de combinar en reaccionar?
quiero renderizar debajo de JSON a la imagen que se muestra
let finalSplit = [ { start: "73", end: "76", splits: [ { word: "Now", start: "73", color:"#FF6262", name:"extra", end: "76", }, ], }, { start: "27", end: "72", splits: [ { word: "GitHub Actions", start: "31", name:"sub1", color:"#DFF652", end: "45", }, { word: "the GitHub Actions “New Workflow” experience.", start: "27", name:"main", color:"#62FF8E", end: "72", }, { word: "GitHub", start: "31", name:"sub2", color:"#9483FF", end: "37", }, ], }, ];Traté de hacer un bucle en cada matriz y renderizar, pero dado que formateó, se duplicó y no pudo renderizar la versión agregada.
const Mark = () => { return ( <> { finalSplit.map((i)=>{ return ( <div> i.split.map((j)=>{ <div>{j.text}</div> }) </div> ) }) } <> ); }necesita de alguna manera generar otro texto de estructura: "anunciando mejoras en la experiencia de "Nuevo flujo de trabajo" de GitHub Actions. Ahora, cuando desee crear" y cada lugar también obtenemos compensaciones
·
Juan Pablo Isaza
1 Respuestas
Responde la pregunta0
Este funciona hasta cierto punto con sorting y absolute positioning . Si tuviera valores de posición reales en píxeles, funcionará como la imagen que ha dado.
const Mark = () => { const sortData = (data) => { return data.sort((a, b) => { if (a.start === b.start) { return b.end - a.end; } else { return a.start - b.start; } }); }; const sortNestedData = (data) => { const unsortedData = data.map((item) => { if (item?.splits) { return { ...item, splits: sortNestedData(item.splits) }; } return item; }); return sortData(unsortedData); }; const renderNestedData = (data) => { const myData = data.map((item) => { return ( <div style={{ backgroundColor: item.color, position: "absolute", left: `${item.start}px`, // width: `${item.end - item.start}px`, top: "0px" }} > {item.word} {item.splits && renderNestedData(item.splits)} </div> ); }); return myData; }; return ( <div style={{ backgroundColor: "lightblue", display: "flex", flexDirection: "row", position: "absolute" }} > {renderNestedData(sortNestedData(finalSplit))} </div> ); }; export default Mark;Caja de arena de código => https://codesandbox.io/s/festive-violet-cc8s7?file=/src/App.js
·
Juan Pablo Isaza
Denunciar
Responde la pregunta