在 ReactJS 中停止选择下一个 span/div 中的文本答案

【问题标题】：Stop selection of text in next span/div over in ReactJS在 ReactJS 中停止选择下一个 span/div 中的文本
【发布时间】：2018-01-26 21:43:53
【问题描述】：

问题

我有一个奇怪的问题想要解决。我的代码中有两个相邻的跨度。当您选择第一个跨度中的最后一个单词时，它将选择它旁边的跨度中的第一个单词。

这里有一个 JSFiddle 来演示：https://jsfiddle.net/b7mybsLr/1/

我的尝试

在我在网上找到的解决方案中，最接近我的是应用 CSS 规则：

    user-select: all;

这停止了问题，而是创建了一个新问题，因为当您单击文本时，它会突出显示跨度中的所有文本，这并不是我真正想要的。

我也试过添加：

    display: inline-block;

这也没有帮助，如演示中所示。

我还在每一行的末尾添加了“&nbsp;”，这确实解决了这个问题。但是，理想情况下，这是我们希望在代码库中避免使用的代码。

最后，我尝试将跨度换成 div，但正如 jsfiddle 中所见，问题仍然存在。我不确定这是渲染 DOM 方式的 React 问题，还是 CSS 问题 - 谢谢。

【问题讨论】：

我在 jsfiddle 中没有看到这个问题。是否与浏览器相关
如果我双击最后一个单词，我可以重现它。可能是默认浏览器行为。在末尾添加一个空格确实可以防止它发生。如果由我决定，我想我会自己添加额外的空间。 text={"Test Span One" + " "}

【解决方案1】：

这是因为浏览器将文本One 和Test 视为单个文本。您可以通过从 css 中删除边距来看到这一点。你会看到文字OneTest

要解决这个问题，只需在 TestComp 文本的末尾添加一个空格，如

<TestComp type={'span'} text={"Test Span One "} />

或将您添加到标签的末尾，如

<TestComp type={'span'} text={"Test Span One"} />&nbsp;

有很多方法可以克服它。

【讨论】：