Me gustaría obtener dinámicamente el ancho del elemento div . Con useRef puedo obtener el ancho de mi div , pero cuando cambio el tamaño de mi página, el valor del ancho no se actualiza automáticamente. ¿Puedes decirme qué debo hacer para que esto suceda?
Aquí está mi código que puse enCodesandbox.io , y una descripción general aquí:
import React from "react"; import "./styles.css"; const App = () => { const ref = React.useRef(null); const [width, setWidth] = React.useState(0); React.useEffect(() => { setWidth(ref.current.offsetWidth); }, [width]); return ( <div className="App"> <h1>Hello CodeSandbox</h1> <div style={{ border: "1px solid red" }} ref={ref} > Width: {width} </div> </div> ); }; export default App;Cambie su useEffect como se muestra a continuación para agregar un detector de eventos para cuando cambie el tamaño de la página. Codesandbox actualizado aquí . También observe que eliminé el estado de width de la matriz de dependencia.
React.useEffect(() => { // when the component gets mounted setWidth(ref.current.offsetWidth); // to handle page resize const getwidth = ()=>{ setWidth(ref.current.offsetWidth); } window.addEventListener("resize", getwidth); // remove the event listener before the component gets unmounted return ()=>window.removeEventListener("resize", getwidth) }, []);