为什么反应服务器端渲染剥离事件处理程序？

Question

我有一个带有img标记的React Server Side渲染组件.我想onload在image标签上附加一个事件监听器,并使组件如下所示:

render () {
  return (
    <img onLoad={() => { console.log('Image loaded'); }} src='/abc.jpg'/>
  )
}

理想情况下,React的renderToString方法应该生成一个HTML模板,如下所示:

<img onload='function () { console.log('Image loaded'); }' src='/abc.jpg' />

但事实并非如此.我错过了什么？我检查过这里有类似的问题,但没有解决方案

Answer 1

React 不在 dom/html 中使用内联事件处理程序。当您的应用程序加载到客户端时，将使用 JavaScript 添加侦听器。

这样做的好处是它们不依赖于全局变量，并且可以出于性能和其他原因使用事件委托。

以这段代码为例：

var a = 1;
<div onClick={() => console.log(a)}</div>

React 不可能将其创建为内联事件处理程序。