Недвижимость 'SVGResize' |«onresize» не существует для типа «SVGProps <SVGSVGElement>»

Question

React + SVG.

Мне нужно обработать событие svg изменения размера элемента.Я вижу, что у него есть события SVGResize и onresize .Я пытаюсь использовать каждый из них, но получаю ошибку компиляции для каждого случая:

const msg1 = (e: any) => console.log(`Message 1: SVG resized.`);
const msg2 = (e: any) => console.log(`Message 2: SVG resized.`);

Теперь я пытаюсь использовать свои функции:

return (<svg id={this.paperId} height={height} version="1.1" 
width={width} xmlns="http://www.w3.org/2000/svg" className="paper" 
SVGResize={msg1}> </svg>);

Ошибка компиляции:

Свойство 'SVGResize' не существует для типа 'SVGProps'.

return (<svg id={this.paperId} height={height} version="1.1" 
width={width} xmlns="http://www.w3.org/2000/svg" className="paper" 
onresize={msg2}> </svg>);

Ошибка компиляции:

Свойство 'onresize' не существует ввведите 'SVGProps'.

Как это исправить?

Answer 1

Событие onresize является свойством глобальных обработчиков событий.Это то же самое, что и window.onresize, и ничего не делает на уровне элементов.

https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onresize

Если вы хотите перерисовать svgs в зависимости от размера окна, вам следует прослушать событие window.onresize и перерисовать его.