反应文本注释答案

【问题标题】：React Text Annotation反应文本注释
【发布时间】：2019-09-30 15:42:15
【问题描述】：

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

注释 JSON 看起来像这样：

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

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

理想情况下，注释也会在 UI 中突出显示。

关于如何做到这一点的任何建议？ AnnotatorJS 似乎维护得不是很好，所以我对在生产项目中使用它感到紧张。

谢谢！

【问题讨论】：

你不能渲染出跨度（或其他元素）内的那些字符并添加你喜欢的任何样式吗？如果可能，我建议不要使用 dangerouslySetInnerHTML 并使用 jsx 元素。

标签： javascript reactjs highlight

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

我同意上面的 DBS 创建两个 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>
)}

【讨论】：