¿Cómo pasaría la anotación de tipo utilizando as SVGElement o as HTMLDivElement etc. en un enlace?
function AppSVG(){ const ref = useResizeObserver((entry) => { ... }) as SVGElement;// <- how do I pass SVGElement to the hook return <svg ref={ref} /> } function AppDiv(){ const ref = useResizeObserver((entry) => { ... }) as HTMLDivElement;// <- how do I pass HTMLDivElement to the hook return <div ref={ref} /> }El gancho
function useResizeObserver(observerCallback: ResizeObserverCallback) { const ref = React.useRef<any>(null);//<- into the ref React.useEffect(() => { if (!!ref && !!ref.current) new ResizeObserver(observerCallback).observe(ref.current); }, []); return ref; }Con Generics puede pasar su tipo como una especie de argumento. useRef toma un genérico en sí mismo, por lo que puede crear su propio tipo genérico y pasarlo a useRef.
function useResizeObserver<T>(observerCallback: ResizeObserverCallback) { const ref = React.useRef<T>(null);//<- into the ref ... }usar:
const ref = useResizeObserver<HTMLDivElement>();más o menos esto es lo que buscaba, la respuesta de Bastiat estaba casi completa. Tuve que incluir <T extends Element> .
gancho:
function useResizeObserver<T extends Element>(observerCallback: (element: T, entry: ResizeObserverEntry[]) => void, options?: ResizeObserverOptions) { const ref = React.useRef<T>(null); React.useEffect(() => { if (!!ref && !!ref.current) { const element = ref.current; new ResizeObserver((entry) => observerCallback(element, entry)).observe(element, options); } }, []); return ref; }componente:
const ref = useResizeObserver<HTMLDivElement>((element) => { const height = element.offsetWidth; const width = element.offsetHeight; setState({ width, height }); });