Estoy trabajando en un proyecto de reacción, donde quiero renderizar condicionalmente un div sobre un div existente que actualmente cubre la pantalla con una imagen. Me gustaría que el div existente se reduzca en altura, al reducir el tamaño de la imagen, cuando el segundo div se renderiza condicionalmente. El segundo div puede tener una altura variada. (por ejemplo, lista de artículos).
Esta es una versión simplificada de lo que tengo en mi aplicación hasta ahora:
function App() { const [show, setShow] = useState(false); return ( <div style={{ border: "solid", width: "100%", maxHeight: "100vh" }} > {show && ( <div> <div style={{ height: "300px", backgroundColor: "red" }}></div> <button onClick={() => { setShow(false); }} > Close </button> </div> )} <div style={{ display: "flex", justifyContent: "center" }} > <img src="https://i.imgur.com/LiAUjYw.png" alt="test" style={{ maxWidth: "100%", height: "auto" }} /> </div> <button onClick={() => setShow(true)}>SHow</button> </div> ); }Inicialmente se ve así: https://imgur.com/a/R0e74Xk
Y al hacer clic en el botón 'Mostrar', se ve así: https://imgur.com/a/Iy6osio
Como puede ver, el div inferior se desplaza hacia abajo y pasa sobre el div del contenedor.
Me preguntaba cómo puedo hacer que el div responda lo suficiente como para cambiar su altura cuando se representa el otro elemento.
Soy bastante nuevo en el estilo, por lo que cualquier ayuda en esto sería muy apreciada.
Gracias.
Aquí hay una idea simple. Vea cómo se le da el estilo a los divs así:
<div style={{ display: "flex", justifyContent: "center" }} > Observe cómo el estilo tiene esta extraña notación {{ }} . Eso es porque el estilo acepta un objeto, y el objeto aquí es:
{ display: "flex", justifyContent: "center" }Podría tomar ese objeto y guardarlo como una variable en algún lugar, por ejemplo:
const styleWhenShow = { display: "flex", justifyContent: "center", height: "100px" } const styleWhenNoShow = { display: "flex", justifyContent: "center", height: "500px" } Como ya tiene el estado de su show , ahora solo es cuestión de reemplazar el accesorio de estilo con:
style={show ? styleWhenShow : styleWhenNoShow}En caso de que no desee repetir algunos estilos comunes entre los estilos show y noshow, también puede hacer algo como:
const commonStyle = { display: "flex", justifyContent: "center" } const styleWhenShow = { height: "100px" } const styleWhenNoShow = { height: "500px" }Y configure el accesorio de estilo como:
style={show ? { ...commonStyle, ...styleWhenShow } : { ...commonStyle, ...styleWhenNoShow }}