React版本：16.13.1
重现步骤
ReactDOMServer.renderToString(<div-x onClick={() => console.log('clicked')} />)vs
ReactDOM.render(<div-x onClick={() => { console.log('clicked'); }} />, root)链接到代码示例： https://jsfiddle.net/hsug65x0/2/
当前行为
自定义元素事件处理程序仅在客户端工作。在SSR中，事件处理程序的代码变为属性值。
预期行为
自定义元素事件处理程序在SSR中工作。
5条答案
按热度按时间pn9klfpd1#
具体来说，在服务器端渲染(SSR)时，
renderToString产生的结果是：但是在客户端渲染中，
onClick仍然可以正常工作。这似乎是以下检查的结果：react/packages/react-dom/src/server/ReactPartialRenderer.js
第373行 e0ab1a4
| | if(isCustomComponent(tagLowercase,props)){ |
vcudknz32#
感谢@esprehn的报告！将Web组件与服务器端渲染结合是一项复杂的任务。你是对的，
isCustomComponent检查是罪魁祸首，我们对于以"on"开头的自定义元素属性有不同的行为(以支持自定义属性)。@gaearon,你是否记得我们是否故意序列化所有以
on为前缀的属性？我只找到了未知属性的测试覆盖率。uyhoqukh3#
修复SSR和CSR之间的不一致性将会很好。当它们添加SSR时，会导致页面的微小破坏。
k4emjkb14#
@gaearon@sebmarkbage 是否有可能在17.0版本中解决这个问题？
9rnv2umw5#
在使用
react-dom@experimental时，这个问题应该已经修复了：https://codesandbox.io/s/react-19-event-handlers-on-custom-elements-3k6eyj相关：#11347