En React, tengo un componente llamado DivHelper que genera 2 divs uno debajo del otro; en cambio, quiero colocarlos uno al lado del otro y no puedo ver el código de Divhelper que genera los divs. ¿Hay alguna forma de acceder a divs generados dinámicamente?
Por ejemplo -
///Algún código aleatorio
< DivHelper/>
///Algo más de código
esto se convierte
///Algún código aleatorio
<div>1 Div</div>
<div>2 Div</div>
///Algo más de código
y por lo tanto, la salida es
1 división
2 divisiones
En cambio, quiero que se coloque uno al lado del otro invertido (como flotar) 2 Div 1 Div
Es posible ?
Puede cambiar dinámicamente el nombre de clase de sus componentes en React. Con su CSS, puede diseñar el componente y el diseño como desee.
Por ejemplo:
import { useState } from "react"; import "./styles.css"; export default function App() { const [display, setDisplay] = useState("row"); const handleClick = () => { display === "row" ? setDisplay("column") : setDisplay("row"); }; return ( <div className="App"> <h1>Dynamic display</h1> <button onClick={() => handleClick()}>Change display</button> <div className={"container " + display}> <div className="square red">First div</div> <div className="square green">Second div</div> </div> </div> ); }Y tu archivo CSS:
.container { display: flex; } .row { flex-direction: row; } .column { flex-direction: column; } .square { background: "red"; height: 100px; width: 100px; } .red { background: #f00; } .green { background: #0f0; }