大家好，我在尝试克隆反应组件（克隆反应组件的父 div）时观察到一个问题，这使得内联事件处理程序以某种方式被禁用/删除，并且克隆组件无法触发任何事件，但原始组件工作正常。据我搜索，javascript cloneNode 方法应该适用于内联事件处理程序，它也适用于纯 html 和 javascript，但不知何故我似乎无法让它在 react.js 中工作索引.jsimport React from 'react';import ReactDOM from 'react-dom';class Football extends React.Component { shoot() { alert("Great Shot!"); } render() { return ( <button onClick={this.shoot}>Take the shot!</button> ); }}ReactDOM.render(<Football />, document.getElementById('root'));索引.html<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <title>React App</title> </head> <body> <div id="root"></div> <button "onclick=CloneIt()">CloneIt</button><script>function CloneIt(){var elem=document.getElementById("mainComp").cloneNode(true);document.body.appendChild(elem);}</script> </body></html>
1 回答
ibeautiful
TA贡献1993条经验 获得超5个赞
React 实际上并没有创建内联事件，即使您内联编写事件也是如此。
JSX 并不是真正的 html，它只是React.createElement被 babel转换为 react 的语法糖。
所以你的内联 onClick 事件实际上变成props.onClick了 props 对象的一个属性，作为第二个参数传递给 React.createElement。
内部反应使用addEventListener.
当您克隆一个 React 元素并将其附加到 DOM 时，新附加的元素将不会有任何指向 React 组件的链接。所以，如果你想让 onClick 事件像处理原始 DOM 一样工作，你需要用 react 组件来填充元素。
var elem = document.getElementById("root").cloneNode(true);
document.body.appendChild(elem);
ReactDOM.hydrate(<Football />, elem);
添加回答
举报
0/150
提交
取消