¿Cómo hago que un div se expanda sin problemas cuando se agrega contenido?
const [render, setRender] = useState(false) const showHide= () => { setRender(!render) } return ( <div className="container"> <h1>TEST CONTAINER</h1> {render && <Paragprah />} <button type="button" class="btn btn-primary" onClick={showHide}>Primary</button> </div> ); }CSS
.container { margin-left: 30%; margin-top: 10%; width: 500px; height: auto; background-color: whitesmoke; }En lo anterior, se representa un componente cuando se hace clic en un botón, cuando se agrega el nuevo contenido al div, se expande instantáneamente. básicamente, me gustaría que se expanda sin problemas cuando se agrega el contenido. Aquí hay un video también de lo que quiero decir cuando se expande instantáneamente.
Establecer una altura fija no funcionará en mi situación porque el contenido que se carga es dinámico, proviene de una API y la longitud es diferente cada vez. Por lo tanto, establecer una altura fija hará que el contenido se desborde a veces. Necesito una forma en la que la transición pueda ocurrir sin problemas y la altura aún sea lo suficientemente grande como para ajustarse al contenido, lo que probablemente requeriría que ```height: auto;`` esté presente.
Aquí actualicé el código. Dado que el contenido que se está cargando tiene un tamaño dinámico, debe rastrear ese tamaño de contenido usando useRef hook y almacenarlo en una variable y exportarlo con su componente.
import { useRef, useEffect} from "react"; var ParagraphHeight; function Paragraph() { const ref = useRef(null); useEffect(() => { //when you content is loaded store its height ParagraphHeight = ref.current.offsetHeight; }, []); return ( <div ref={ref}> <p>Your content here for exemple...</p> </div> ); } export { Paragraph, ParagraphHeight }; Ahora importe su componente Párrafo y colóquelo dentro de un div .wrapper que tenga una altura predeterminada de 0px (eso significa que su Párrafo estará oculto) y cuando haga clic en el botón, la altura cambiará a ParagraphHeight
import { useState } from "react"; import { Paragraph, ParagraphHeight } from "./Paragraph.js"; export default function App() { const [isopned, setisopned] = useState(false); const [wrapperHeight, setWH] = useState(0); const showHide = () => { if (!isopned) setWH(ParagraphHeight); else setWH(0); setisopned(!isopned); }; return ( <div className="container"> <h1>TEST CONTAINER</h1> <div className="wrapper" style={{ height: wrapperHeight }}> <Paragraph /> </div> <button type="button" className="btn btn-primary" onClick={showHide}> Primary </button> </div> ); }Finalmente, no olvide actualizar su CSS, agregue overflow-y hidden y CSS Transition para expandir su contenedor div sin problemas.
.container { margin-left: 30%; margin-top: 10%; width: 500px; background-color: whitesmoke; } .wrapper { display: grid; /*to prevent some problem caused by overflow hidden*/ transition: height 1s linear; background-color: wheat; overflow-y: hidden; }Esta es una demostración de ejemplo en vivo
puede usar la propiedad de transición css para una transición suave.
transition: height 2s;Siga este enlace para referencia.