从 HTMLDivElement 创建新的 class 并扩展其原型

Question

我正在尝试使用新方法扩展 HTMLDivElement 原型。但是，我不想用我的方法污染 HTMLDivElement 本身，所以我试图创建一个新的 class 来扩展它。

export class ScrollableElement extends HTMLDivElement {
  scrollHorizontal(left: number) {
    this.scrollTo({ left, behavior: 'smooth' });
  }
}

我将此元素用于可滚动 div 的引用。但是，每当我尝试调用此方法时，都会收到错误提示 listRef.scrollHorizontal is not a function.

有什么办法可以实现吗？

Answer 1

我已经成功地使用委托来做到这一点，正如我建议的问题下方的一条评论。

元素class:

export class ScrollableElement {
  private _element: HTMLDivElement | null;

  constructor(element: HTMLDivElement | null) {
    this._element = element;
  }

  scrollHorizontal(left: number) {
    this._element?.scrollTo({ left, behavior: 'smooth' });
  }
}

对 div 的引用赋值：

const [scrollableEl, setScrollableEl] = useState<ScrollableElement | null>(null);

return <div ref={ref => setScrollableEl(new ScrollableElement(ref))} />

function scroll() {
  scrollableEl?.scrollHorizontal(100);
}

从 HTMLDivElement 创建新的 class 并扩展其原型

create new class from HTMLDivElement and extend its prototype

html

javascript

prototype

typescript

reactjs