Tengo experiencia trabajando con Javascript, pero soy bastante nuevo en trabajar con React. Cuando codifico puramente en javascript que se representaría en el navegador, a menudo usaría:
width = document.getElementById('element_id').clientWidthpara dimensionar dinámicamente mis elementos svg a diferentes tamaños de contenedores. ¿Existe algo así en React? He estado tratando de usar la misma técnica, pero como era de esperar, no funciona porque la plantilla se procesa después de ejecutar el script.
El uso puede usar este trabajo. useEffect(hizoActualizar);. Acepta una función que contiene código imperativo, posiblemente eficaz.
const App = () => { useEffect(() => { const width = document.getElementById('width').clientWidth; console.log({ width }); }, []); return( <div id="width" /> ); }Por supuesto. Es algo muy fácil de hacer usando el gancho "createRef". Básicamente, document.getElementById busca un elemento DOM y con createRef está asignando una referencia al elemento DOM (virtual) y puede realizar todas las manipulaciones en él.
Mira cómo se hace aquí:
import React, { createRef } from 'react'; export const FooComponent = () => { const fooRef = createRef<HTMLDivElement>(); const handleClick = () => { const divClientWidth = fooRef.current?.clientWidth; window.alert(divClientWidth); }; return ( <div ref={fooRef}> <button onClick={handleClick}>Show client width</button> </div> ); };