Quiero obtener el ancho de un div dinámico después de pintarlo, pero no puedo decir cómo. Esto es lo que estoy haciendo:
const ref=useRef(); useEffect(()=>{ console.log('REF',ref.current.offSetWidth) },[]) return ( <div ref={ref}> </div>Probé window.resize eventListener, pero solo se activa si las dimensiones de la pantalla cambian. Mi pregunta, ¿hay alguna forma de obtener el ancho de un div después de que se muestra en la pantalla? No estoy configurando el ancho de antemano, solo está tomando el 100% del elemento principal dentro de un cuadro flexible
Puede usarResizeObserver , una implementación simple con React podría ser algo como esto:
import {useRef, useEffect} from 'react' export default function App() { const divRef = useRef() useEffect(() => { new ResizeObserver(() => { console.log('Width: ', divRef.current.clientWidth) }).observe(divRef.current) }, []) return ( <div ref={divRef}> </div> ); }Su código está funcionando, creo. Aquí hay una breve implementación de TypeScript para mostrar mi punto:
... const ref = useRef<HTMLDivElement>(); return ( <div ref={ref as MutableRefObject<HTMLDivElement>}> <button onClick={() => console.log('REF', ref?.current?.clientWidth)}>TEST</button> </div> ); ...Resultado de la consola al hacer clic en el botón antes de cambiar el tamaño: [![ingrese la descripción de la imagen aquí][1]][1]
Resultado de la consola al hacer clic en el botón después de cambiar el tamaño: [![ingrese la descripción de la imagen aquí][2]][2]
Supongo que la razón por la que nunca ves los cambios es que aquí tienes un efecto de uso que solo se ejecuta una vez. También tenga en cuenta que los cambios en el objeto ref no activarán automáticamente una nueva representación. [1]: https://i.stack.imgur.com/uCmz4.png [2]: https://i.stack.imgur.com/cWpVM.png
