我使用 ReactJS 16.13.1，现在我想渲染一个带有事件的外部 DOM 元素。
所以我们假设有一个
<button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Siri</button>这是由库生成的（还有一些其他事件）。
现在我想要： 复制它（带有事件）并在我的 ReactJS 渲染函数中渲染这个元素。
最合适的方法是什么？
我不是在寻找 ReactDOM.createPortal()。
我想在我的 React 组件中显示一个带有事件的外部 DOM 元素。
【问题讨论】：
标签： javascript reactjs dom
为了在你的 React 代码中使用 HTML，你需要在一个元素上使用 dangerouslySetInnelHTML 属性。
function libraryReturnedHTML() {
return '<button type="button" id="testBtnSiri" onclick="alert('Functionality exists');">Testbutton Siri</button>'
}
function MyComponent() {
return <div dangerouslySetInnerHTML={__html: libraryReturnedHTML} />;
}
但是您必须知道，这会使您的代码容易受到 XSS 攻击。为了防止出现这种情况，最好先清理您的 HTML，以便您只有所需的脚本和链接标签。为了清理html，您可以简单地使用普通的Javascript函数和document.createTreeWalker
您还可以利用现有的库来清理您的 HTML。例如sanitize-html
然而，消毒只是一个额外的预防措施。
【讨论】：
在Node.addEventListener() 上创建一个包装器，它将在其他库呈现按钮时捕获添加到按钮的所有事件侦听器。它可能看起来像这样（这段代码必须在外部库创建按钮之前执行）：
let ael = Node.prototype.addEventListener
let eventListeners = []
Node.prototype.addEventListener = function(type: string, listener: EventListenerOrEventListenerObject | null, options?: boolean | AddEventListenerOptions): void {
if((this as HTMLElement).id === "buttonID")
eventListeners.push({type, listener, options})
this.addEventListener = ael
this.addEventListener(type, listener, options)
}
使用您的按钮创建反应组件 - 您可以创建一个新组件，或使用 dangerouslySetInnerHtml 注入。将 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>
}
【讨论】：