ReactJS-使用事件渲染外部DOM元素

Question

bounty到期在7天内。该问题的答案有资格获得+ 100声望赏金。Gutelaunetyp希望引起更多关注对此问题：

我正在寻找一种在我的ReactJS组件中显示DOM元素（及其事件）的解决方案。

所以我需要访问一个外部DOM元素并将其以某种方式拉入我的ReactJS组件。

我不是在寻找ReactDOM.createPortal（）

我使用ReactJS 16.13.1，现在我想使用其事件呈现外部DOM元素。

因此，假设有一个

<button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Siri</button>

这是由库生成的（还有其他一些事件）。

现在我要：要复制它（带有事件）并在我的ReactJS渲染函数中渲染此元素。

最合适的方法是什么？

我不是在寻找ReactDOM.createPortal（）。

我想在我的React Component中显示一个外部DOM元素及其事件。

Answer 1

这不是useRef的用途吗？https://reactjs.org/docs/hooks-reference.html#useref

您能否控制按钮足够添加参考？

Answer 2

为了在React代码中使用HTML，您需要在元素上使用dangerouslySetInnelHTML属性。

Answer 3

Fast＆Dirty：您可以使用JQuery document.createTreeWalker方法使用所有事件侦听器克隆一个元素。在后台，它使用围绕Node.addEventListener（）的包装函数来跟踪添加到每个节点的侦听器。您可以编写自己的监听器，并跟踪添加了哪些监听器并将监听器重新分配给新的DOM对象。