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

Question

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

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

理想情况下，React的renderToString方法应该生成如下的HTML模板：

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

但事实并非如此。我错过了什么？我检查过类似的问题here，但没有解决方案

Answer 1

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

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

以此代码为例：

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

React无法将其创建为内联事件处理程序。