javascript - 反应从内部元素的 onLoad() 返回的合成事件 does not have naturalWidth or naturalHeight properties

Question

我正在使用 ReactJS。我的目标是在 SVG 元素内加载图像时触发一些事件。

如果没有 SVG 元素，下面的代码将按预期工作-

function onImageLoad(event) {
   console.log("Event triggered from <img> element", event);
    // AS EXPECTED : Event object has natural width and natural height
  }

return (
      <div>
        <img src={imageName} onLoad={ (event) => onImageLoad(event) }/> 
      </div>
)

但是，此代码无法按预期工作-

function onImageLoad(event) {
    console.log("Event triggered from <image> element", event);
    // UNEXPECTED : Event object does not have natural width or natural height
  }

return (
      <div>
        <svg>
          <image href={imageName} onLoad={ (event) => onImageLoad(event) }/> 
        </svg>
      </div>
)

我曾尝试在几个地方阅读。目前尚不清楚为什么与反应中的合成事件<image>不同。<img>onLoad()

标签： javascriptreactjsimagesvgonload-event