Javascript 如何将带有事件绑定的hml作为字符串传递到render（）方法中？

我想获取一个包含

a

标记的HTML字符串，将事件处理程序分配给它们，并呈现它们。html示例：

This is a sample blog post with HTML. <a data-id="1">Click here.</a>

这是一篇带有HTML的示例博客文章。点击这里。

我可以使用jQuery解析此HTML字符串并插入事件（或道具，或任何其他内容），如下所示：

This is a sample blog post with HTML. <a data-id="1" ref="myClick" onClick={this.handleClick}>Click here.</a>

这是一篇带有HTML的示例博客文章。点击这里。

现在我要渲染它：

return (
            <div>
                <p dangerouslySetInnerHTML={{__html: theHtml}}></p>
            </div>
        );

返回(

);

---

但是，这会呈现原始HTML，而不会产生任何效果。如何将HTML/格式创建为字符串，然后将其呈现为正常格式？

没有好的方法可以做到这一点。我能想到的最好方法是将字符串解析为HTMLAST，然后从中创建虚拟dom。这不是很快或很容易做到

除此之外，您还可以选择：

• 没有html字符串
  • 拥有可以从中生成虚拟dom的数据
  • 如果可能的话，这总是最好的
• 在componentDidMount中使用危险的LySetinerHTML并手动附加侦听器
  • 如果有很多侦听器，则速度较慢，并且需要在componentWillUnmount中清理它们
• 将react事件处理程序放在包装器div上，并使用e.target查看事件的目标是什么（即使用事件冒泡）

第二个项目符号的示例：

componentDidMount: function(){
    var el = this.getDOMNode();
    // add a click listener to the first <a> child
    el.querySelector('a').addEventListener('click', this.aClick)
},
componentWillUnmount: function(){
    var el = this.getDOMNode();
    el.querySelector('a').removeEventListener('click', this.aClick)
},
aClick: function(event){ ... }

componentDidMount:function（）{
var el=this.getDOMNode（）；
//将单击侦听器添加到第一个子项
el.querySelector（'a'）.addEventListener（'click'，this.aClick）
},
componentWillUnmount:function（）{
var el=this.getDOMNode（）；
el.querySelector（'a'）。removeEventListener（'click'，this.aClick）
},
aClick:函数（事件）{…}

您显示的字符串格式使用JSX风格的语法，这通常是仅编译时语法。虽然有一种方法可以在运行时使用它，但它不是很有效，也不推荐。您介意给出或链接“将字符串解析为html ast，然后从中创建虚拟dom”的示例，以及使用componentDidMount的第二个要点吗？我没有html ast选项的示例，正如我所说的，这并不容易。我添加了一个手动侦听器的示例。非常感谢您的帮助！第二点或第三点似乎很有效。第三个不需要任何清理，看起来相对无害，所以我可以选择。谢谢你抽出时间！