Как расширить или переписать свойство интерфейса компонента сторонней библиотеки?

Question

[Asker1888]

Добрый день!
Установил компонент Link из пакета react-scroll.

На этот компонент мне нужно повесить onClick с обработчиком, который обрабатывает event, но в интерфейсе компонента onClick не предполагает передачу события.
Как можно расширить интерфейс не изменяя typing.d.ts внутри самого пакета?

Как пытаюсь использовать:

<ScrollLink 
   to="program" 
   duration={300} 
   smooth={true} 
   offset={-50} 
   className="Link Header-Link" 
   data-ymgoal="MY_GOAO"
   onClick={ ymHandler }
  >

Интерфейс:

export interface ReactScrollLinkProps {
    to: string;
    containerId?: string;
    activeClass?: string;
    spy?: boolean;
    hashSpy?: boolean;
    smooth?: boolean | string;
    offset?: number;
    delay?: number;
    isDynamic?: boolean;
    onClick?(): void;
    duration?: number | string;
    absolute?: boolean;
    onSetActive?(to: string): void;
    onSetInactive?(): void;
    ignoreCancelEvents?: boolean;
}

Моя функция-обработчик:

const ymHandler = (event: any): void => {
    console.log(event);
    const goal = event.currentTarget.getAttribute('data-ymgoal');
    ym('reachGoal', goal);
  }

Answer 1

[shsv382]

Можно обернуть его в div, а на него навесить обработчик onClick, поменяв

const goal = event.currentTarget.getAttribute('data-ymgoal');

на

const goal = event.currentTarget.firstElementChild.getAttribute('data-ymgoal');

Comments

[Asker1888]

Спасибо за ответ! Но это решение приводит к увеличению узлов DOM. Если не найдется решения с переопределением - буду использовать его.

[shsv382]

Asker1888, не думаю, что это как-то сильно негативно повлияет на производительность. DIV-элементы в свое время для этого и придумывали, чтобы разграничивать элементы разметки и оборачивать в них другие элементы.

p.s. по крайней мере, это гораздо лучше, чем переписывать стороннюю библиотеку, ведь такие переписывания могут ее сломать

Answer 2

[forspamonly2]

пофиксить тайпинг и отправить пуллреквест в DefinitelyTyped.

потому что сам react-scroll событие передаёт.