[大家好，我在尝试克隆React组件时会观察到一个问题（克隆react组件的父div），这使得内联事件处理程序被禁用/删除，无法从克隆的组件中触发任何事件，但是原始组件正常工作。据我搜索的javascript cloneNode方法应该适用于内联事件处理程序，它也适用于普通的html和javascript，但是以某种方式我似乎无法使其在react.js中起作用]
index.js
import 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'));
index.html
<!DOCTYPE html>
<html lang="en">
<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>
JSX不是实际的html，它只是语法语言，被babel转换为React.createElement进行反应。
所以您的内联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);