javascript - 为什么 react 服务器端渲染剥离事件处理程序？

Question

我有一个带有 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但没有解决方案

Answer 1

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

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

以这段代码为例:

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

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