Estoy tratando de extender el prototipo HTMLDivElement con un nuevo método. Sin embargo, no quiero contaminar el propio HTMLDivElement con mis métodos, así que intento crear una nueva clase que lo amplíe.
export class ScrollableElement extends HTMLDivElement { scrollHorizontal(left: number) { this.scrollTo({ left, behavior: 'smooth' }); } } Utilizo este elemento para la referencia de div desplazable. Sin embargo, cada vez que trato de llamar a este método, aparece un error que dice que listRef.scrollHorizontal is not a function .
¿Hay alguna manera de lograr esto?
Me las arreglé para hacer esto usando la delegación como un comentario debajo de mi pregunta sugerida.
Clase de elemento:
export class ScrollableElement { private _element: HTMLDivElement | null; constructor(element: HTMLDivElement | null) { this._element = element; } scrollHorizontal(left: number) { this._element?.scrollTo({ left, behavior: 'smooth' }); } }Asignación de referencia a div:
const [scrollableEl, setScrollableEl] = useState<ScrollableElement | null>(null); return <div ref={ref => setScrollableEl(new ScrollableElement(ref))} /> function scroll() { scrollableEl?.scrollHorizontal(100); }