属性“ SVGResize” |类型'SVGProps <svgsvgelement>'

Question

反应+ 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>);

编译错误：

  

类型“ SVGProps”上不存在属性“ SVGResize”。

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

编译错误：

  

类型“ SVGProps”上不存在属性“ onresize”。

我该如何解决？

Answer 1

onresize事件是全局事件处理程序的属性。它与window.onresize相同，并且在元素级别不执行任何操作。

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

如果要根据窗口大小重画svg，则应侦听window.onresize事件并根据该事件重画。