0
142
VisualizaçõesReacciona los cambios de estilo en línea una vez que envuelvo el número en div
Estoy construyendo un componente de tabla React con filas y columnas. Naturalmente, quiero que las filas se distribuyan verticalmente y los números dentro de las filas se distribuyan horizontalmente.
En este momento, se ve así:
Pero cuando envuelvo cada número en un componente Cell simple, termino con esto:
Código de reacción:
function Cell({ number }) { return ( <div> {number} </div> ) } function Row({ row }) { // problem when data point is wrapped in Cell const mapped = row.map((datapoint, index) => { return <li className="horizontalList" key={index.toString()}><Cell number={datapoint}/></li> }) // uncomment this and comment out the other one to see how it should look // const mapped = row.map((datapoint, index) => { // return <li className="horizontalList" key={index.toString()}>{datapoint}</li> // }) return ( <div className="row"> <ul> {mapped} </ul> </div> ) } function App() { const data = [ [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], [1, 2, 3, 4, 5], ] const mapped = data.map((row, index) => { return <li className="verticalList" key={index.toString()}><Row row={row}/></li> }) return ( <div className="App"> <div className="container"> <ul> {mapped} </ul> </div> </div> ); }CSS:
.container { display: flex; flex-direction: column; align-items: center; } .horizontalList { display: inline; padding: 10px; } .verticalList { padding: 10px; }1 Respostas
Responde à pergunta0
Los elementos en línea (p. ej. <span> ) normalmente se muestran en línea junto a otros. Sin embargo, cuando inserta un elemento de bloque (por ejemplo, <div> ) dentro como:
<span> <div></div> </span> Ese div sigue tomando el ancho completo e ignora los límites de su span principal.
Y eso es exactamente lo que sucede cuando envuelves el número, que está en línea según tus estilos, dentro de una <Cell /> , ya que es solo un div .
Ejecute este fragmento de código para comprobar la diferencia:
<h4>Inline elements</h4> <span>item</span> <span>item</span> <hr /> <h4>Block element inside inline elements</h4> <span><div>item</div></span> <span><div>item</div></span> Solución: haga que <Cell /> sea un span en lugar de un div .