javascript - 用于突出显示文本和从文件中重新加载突出显示的 React 组件

Question

我正在努力创建具有以下功能的文本荧光笔:

• 它允许用户选择并突出显示/取消突出显示文本页面有不同的颜色。
• 从文件中加载突出显示(在页面中的文件中搜索单词并突出显示它们)。

我能够使用 rangy https://github.com/timdown/rangy 创建突出显示和删除突出显示功能(这不是一个 React 组件)，但是每当页面上的任何组件使用(setState 方法)设置状态时，这些突出显示就会消失。

此外，使用此方法不容易将先前突出显示的项目加载到页面中。

这就是为什么我再次重新开发此功能，我想知道解决此问题的正确方法是什么？

我一直在考虑开发一个自定义React组件来突出显示并将其添加到页面，但是对于这种方法，我想知道如何在用户选择页面上的文本时动态添加突出显示组件而不丢失它当状态更新时。

有关如何添加动态组件的有用资源的链接对我来说很方便，因为我一直在寻找解决此问题的正确方法一段时间，但我认为我可能没有朝着正确的方向前进。

Answer 1

React 将重新渲染状态发生变化的任何内容。这将导致突出显示消失，因为即使元素看起来相同，但它们并不相同。

如果您设置 a unique key，React 也会智能地不重新渲染。在许多情况下，属性(property)。这让 React 知道要重用该组件。

如果状态正确更改，并且您有时只想阻止重新渲染，则应该实现 shouldComponentUpdate lifecycle method自己控制重新渲染条件。