如何找到代表其实际html元素的React DOM节点？

Question

这是我的问题，如果您感兴趣：我想找到用户选择的文本，并在该选择的开头和结尾插入一个标记（以突出显示文本）。

正如StackOverflow的顶级思想所引用的那样，找到选择的最佳方法是使用window.getSelection()。

这与getRangeAt(0)结合起来，列出了一系列事物，其中startContainer和endContainer看起来特别有前途。 startContainer.parentNode直接指向p标签我开始选择。太棒了！

但是，我如何知道它在React DOM中代表哪个元素？我该如何操纵正确的事情？

Answer 1

window.addEventListener("mousedown", function(e){console.log(e)});

使用此事件监听器（或更好地使用mouseup），您可以找到有关目标的所有数据，例如：如果您将这段代码复制/粘贴到控制台并查看日志，您将找到有关此事件的所有信息，包括目标，时间戳，移位键，控制键，x，y，鼠标键和所有相关信息。如果将此与前面描述的结合使用，您将获得所需的结果

Answer 2

编辑：正如Mox间接提到的......当React重新渲染时，所有新节点都会被覆盖并且突出显示将会丢失。这个选项不适用于React。

我将在这里留下这个答案，因为如果没有经常重新渲染突出显示的文本，它是一个选项。

---

我相信[surroundContents][1]方法对你很有用。

根据documentation，您可以创建一个新节点。在该新节点上设置class属性。此类应启用您想要的突出显示。

然后，您可以将新节点传递到surroundContents方法，以将范围选择的内容放入新节点。

以下是文档中的示例：

var range = document.createRange();
var newNode = document.createElement("p");

range.selectNode(document.getElementsByTagName("div").item(0));
range.surroundContents(newNode);

我相信你已经有了一个范围对象，所以你只需要创建一个新节点来包装突出显示的文本并使用surroundContents方法。

我确实看到了这种方法的一个主要问题。

如果用户突出显示容器内部和同一容器外的文本，则可能会出现以下情况：

<p>
    some text
<span class="highlighting">
    some more text
</p>
   some other text
</span>

我不知道surroundContents将如何处理这个，所以这可能会成为你的问题。