Javascript ReactJS-使用事件呈现外部DOM元素

我使用ReactJS 16.13.1，现在我想用它的事件呈现一个外部DOM元素

那么让我们假设有一个

---

Testbutton Siri

在

节点上创建一个包装器。addEventListener（）

，它将捕获由其他库呈现时添加到按钮的所有事件侦听器。它可能是这样的（必须在外部库创建按钮之前执行此代码）：

让ael=Node.prototype.addEventListener
让eventListeners=[]
Node.prototype.addEventListener=函数（类型：字符串，侦听器：EventListenerOrEventListenerObject | null，选项？：布尔值| AddEventListenerOptions）：无效{
if（（作为HTMLElement.id==“buttonID”）
推送（{type，listener，options}）
this.addEventListener=ael
this.addEventListener（类型、侦听器、选项）
}

使用您的按钮创建react组件-您可以创建一个新组件，或者使用。将

eventListeners

数组作为道具传递。在组件装载和卸载时，向按钮添加/删除事件侦听器

function ClonedButton({eventListeners}: any){
  useEffect(()=>{
    eventListeners.forEach((el) => document.getElementById("my-migrated-new-button")!.addEventListener(el.type, el.listener, el.options));
    return () => {
      eventListeners.forEach((el) => document.getElementById("my-migrated-new-button")!.removeEventListener(el.type, el.listener, el.options));
    }
  }, [])
  return <button id="my-migrated-new-button"></button>
}

函数ClonedButton（{eventListeners}:any）{
useffect（（）=>{
eventListeners.forEach（（el）=>document.getElementById（“我迁移的新按钮”）！.addEventListener（el.type，el.listener，el.options））；
return（）=>{
eventListeners.forEach（（el）=>document.getElementById（“我迁移的新按钮”）！.removeEventListener（el.type，el.listener，el.options））；
}
}, [])
回来
}

为了在React代码中使用HTML，您需要在元素上使用prop

function libraryReturnedHTML() {
  return '<button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Siri</button>'
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={__html: libraryReturnedHTML} />;
}

函数库returnedhtml（）{
返回“Testbutton Siri”
}
函数MyComponent（）{
回来
}

但是，您必须知道，这使您的代码容易受到XSS攻击。为了防止出现这种情况，最好先清理HTML，这样您就只有所需的脚本和链接标记。为了净化EHTML，您只需使用普通Javascript函数和

您还可以利用现有的库来清理HTML。例如

---

然而，消毒只是一种额外的预防措施。

这可能会帮助你：@yAzou不，这没有帮助。它们将React组件呈现到另一个DOM元素中。我在寻找完全相反的情况。我想在我的ReactJS组件中显示一个外部DOM元素及其事件。这对我没有帮助，因为我还需要按钮上的其他功能（事件）。什么样的功能。它们都将随库提供的脚本一起提供完整的上载功能，就像我无法手动重建的80个其他事件一样。正如我在回答中所说的，这些事件和其他东西应该由库提供，并带有itIt返回的HTML，这对我毫无帮助。我的ReactJS应用程序是在外部库之后呈现的，如果我只使用html呈现一个相同的按钮，按钮的功能（事件）就不存在了。听起来像个主意。然后如何在ReactJS中呈现克隆的元素？您能给出一个示例吗？@Gutelaunetyp我已经提供了使用Typescript和react钩子的示例。希望这有帮助。嗨，昨天我尝试使用jQuery（带有事件）克隆元素，但已经不起作用了。你能看一看吗？在那里，我还以一种不同的、更一般的方式描述了我的问题。