在React组件中操作DOM元素

Question

我的代码获取了一段HTML并在页面上进行了渲染。当用户选择此段HTML内的某些文本时，我希望所选文本被包裹在它自己的标签中（这是类似于Google Docs评论系统的“高亮”功能）。

如果我使用普通的Javascript来实现，我会自己改变DOM。但我不确定如何在React中安全地实现这一点，以及我应该在组件生命周期的哪个阶段来实现它。

理想情况下，我可以直接操作与我的HTML块对应的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 }] 进行了更新。我希望字符5到10被包装在一些 <span> 中。

这样做的正确方式是将 this.props.content 解析为一个 Element，在正确的位置添加 <span>，然后在最后使用 dangerouslySetInnerHTML？

- user6273283

---

使用 refs 应该可以解决问题。不过，提供一些示例代码会更有助于澄清问题。 - Davin Tryon

Answer 1

也许你可以将想要突出显示的文本与 <p> 元素一起存储在状态中。例如：

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

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

- Sezerc