用于突出显示文本和从文件重新加载突出显示的反应组件

问题描述 投票:0回答:1

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

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

我能够使用rangy https://github.com/timdown/rangy(它不是反应组件)创建突出显示和删除突出显示功能,但只要页面上的任何组件使用(setState方法)设置状态,这些突出显示就会消失。

此外,使用此方法无法轻松地将以前突出显示的项目加载到页面中。

这就是我再次重新开发这个功能的原因,我想知道解决这个问题的正确方法是什么?

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

关于如何添加动态组件的有用资源的链接对我来说很方便,因为我一直在寻找解决此问题的正确方法,我想我可能不会朝着正确的方向前进。

javascript reactjs highlight react-component
1个回答
1
投票

React将重新渲染状态已更改的任何内容。这将导致您的突出显示消失,因为即使它们看起来相同,元素也不相同。

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

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

© www.soinside.com 2019 - 2024. All rights reserved.