Question

我想在其中包含一个包含a个标记的HTML字符串，为它们分配事件处理程序，然后渲染它们。示例html：

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

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

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

现在我要呈现它：

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

但是这会渲染原始HTML而没有任何React魔法。如何将HTML /格式创建为字符串然后正常呈现？

Answer 1

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

除此之外，您的选择是：

没有html字符串
- 拥有可以从
- 如果可能的话，这总是最好的
使用dangerouslySetInnerHTML并在componentDidMount中手动附加侦听器
- 如果有很多听众会很慢，你需要在componentWillUnmount中清理它们
将反应事件处理程序放在包装器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){ ... }

如何将带有事件绑定的html作为字符串传递给render（）方法？

1 个答案: