reactjs - 在 React 组件中操作 DOM 元素

Question

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

如果我使用纯 Javascript 执行此操作，我会自行更改 DOM。但我不确定如何在 React 中安全地执行此操作，或者我可以在组件生命周期的哪个位置执行此操作。

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

我怎样才能在 React 中做到这一点而不搬起石头砸自己的脚？

编辑:

根据请求，一些示例代码。假设我们的组件接收到这些 Prop :

{
  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最后呢？

Answer 1

也许你可以存储你的 <p>带有要在您的状态中突出显示的文本的元素。喜欢

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

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