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

【问题标题】：Why react server side rendering strips event handlers?为什么反应服务器端渲染剥离事件处理程序？
【发布时间】：2017-03-29 07:10:01
【问题描述】：

我有一个带有 img 标签的 React 服务器端渲染组件。我想在图像标签上附加一个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 有类似的问题，但没有解决方案

【问题讨论】：

【解决方案1】：

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

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

以这段代码为例：

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

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

【讨论】：