将函数解析为危险的setinnerhtml答案

【问题标题】：Parsing functions into dangerouslysetinnerhtml将函数解析为危险的setinnerhtml
【发布时间】：2021-12-11 14:39:58
【问题描述】：

我目前遇到了危险的setinnerhtml 的问题。我试图让人们通过 js 文档在 react 中编辑部分，这些编辑以字符串的形式出现。例如一个人可以将以下内容解析为 js 文件中的字符串：

let html = `<div onClick="(input)=>{console.log(input)}">Click me</div>`

在我的代码中，我想将其显示为：

<div dangerouslySetInnerHTML={{ __html: html }}></div>;

div 看起来很好，但“onClick”功能没有触发。我已经看到使用 HTML Parser 的建议，但这不是一个选项，因为在这种情况下我被限制使用外部库。有人对这应该如何工作有任何建议吗？

谢谢！

【问题讨论】：

dangerouslysetinnerhtml 指的是innerHTML，也就是纯原生html，所以你不能使用像onClick这样的React SyntheticEvent函数

【解决方案1】：

如果你真的需要，你可以这样做。

let html = '<div onclick="console.log(this)">Click me</div>';

和你在代码中所做的一样。

<div dangerouslySetInnerHTML={{ __html: html }}></div>;

【讨论】：