Question

我正在开发一个React应用，用户可以选择文本并添加简单的注释。此外，以前的注释将通过JSON从API加载。

注释JSON看起来像这样：

"annotations": [
  {
    "id": 1,
    "start": 12,
    "end": 67,
    "text": "Annotation Text"
  }
]

其中start和end是HTML中的字符位置，该位置也通过JSON和dangerouslySetInnerHTML加载。因此，当添加新的注释时，将注释保存回API时，它们的字符位置需要匹配。

理想情况下，注释也会在用户界面中突出显示。

有关如何执行此操作的任何建议？ AnnotatorJS似乎维护得不太好，所以我很担心在生产项目中使用它。

谢谢！

Answer 1

使用react-text-annotate 一个React组件，用于交互式突出显示部分文本。 https://github.com/mcamac/react-text-annotate/

这是demo的链接，用于react中的文本注释

Answer 2

我同意上面的DBS创建两个div，一个带有带注释样式的div，另一个不带注释的样式。通过匹配（.contains（）或正则表达式）或您的大小写来找出要注释的文本，然后在具有所需样式的类的div中呈现这些文本。

首先，我可能会将所有文本推入数组，也许使它们成为具有布尔值isAnnotated的对象，然后将该数组映射到JSX中。如果文本isAnnotated等于true，则对该文本字符串使用带注释文本的CSS类，否则将其压入无类div。

const Footer = (props) => {
return(
<span>
 <div className='annotated-text'>{annotatedText}</div>
 <div> className='other-text'>{otherText}</div>
</span>
)}

反应文本注释

2 个答案: