如何将带有事件绑定的 hml 作为字符串传递给 render() 方法？

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/formatting 创建为字符串，然后将其正常呈现？

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){ ... }

如何将带有事件绑定的 hml 作为字符串传递给 render() 方法？

How to pass hml with event bindings as a string into the render() method?

javascript

reactjs

react-jsx