在React组件中操作DOM元素

Question

我的代码获取一个HTML blob并在页面上呈现它。当用户在此blob中选择一些文本时，我希望所选文本包含在其自己的范围内。 （这是类似Google Docs评论系统的“突出显示”功能。）

如果我使用普通的Javascript进行此操作，我会自己改变DOM。但是我不确定如何在React中安全地执行此操作，或者在组件生命周期中我可以这样做。

理想情况下，我可以直接操作与我的HTML blob相对应的Element并直接在render()内使用它，但我不知道这是否会与React的簿记相符。

我怎样才能在React中做到这一点而不会让自己陷入脚步？

修改

每个请求，一些示例代码。假设我们的组件收到这些道具：

{
  id: 1337,
  content: "<p>This is a paragraph with some <strong>markup</strong></p>",
  highlights: [],
}

并相应地呈现：

const Widget = React.createClass({
  render() {
    return <div dangerouslySetInnerHTML={{__html: this.props.content}} />       
  },
});

现在，组件已使用highlights: [{ start: 5, end: 10 }]进行更新。我希望在一些<span>中包含字符5到10。

执行此操作的正确方法是将this.props.content解析为Element，在正确的位置添加<span>，在结尾添加dangerouslySetInnerHTML吗？

Answer 1

也许您可以将<p>元素与要突出显示的文本一起存储在状态中。喜欢

this.state = {
  willHighlight: <p>This is a <span>paragraph</span> with some <strong>markup</strong></p>
}

然后您可以有条件地渲染它。我认为这是一种更好的方法