javascript - 使用 React 显示 HTML 格式的文本时出现不变冲突错误

Question

我正在构建一个需要使用外部 API 来获取一些文本的 React 应用程序。问题是文本返回为带有 HTML 标记的字符串以显示强调，例如:

{ "text": ["The quick <em class='hl'>brown</em> fox"] }

我一直在像这样使用dangerouslySetInnerHTML

{this.props.text.map(function(snippet) {
   return <div dangerouslySetInnerHTML={{__html: snippet }}></div>
})}

大部分时间都有效，但我遇到了 API 返回的文本格式化方式导致 React 抛出以下错误的情况:

Uncaught (in promise) Error: Invariant Violation: 
Danger: Expected markup to render 7 nodes, but rendered 4

看来目前没有办法catch errors in the render function ，所以我不能忽略有问题的问题并继续。

是否有更好的方法来处理文本强调或使用 React 突出显示之类的事情，或者也许有一种方法可以过滤或捕获 React 可能会发现有问题的字符串？

Answer 1

这个问题真的很玄乎!我注意到偶尔我试图显示的文本片段包含 <或 > ，这似乎正在摆脱 React。

我对我希望保留的标签进行了正则表达式替换(将它们替换为 @@@ 用于带有类的起始标记，*** 用于结束标记)，删除了所有 < 的实例或 > , 然后用原来的标记替换占位符。

删除这些额外的符号似乎解决了这个问题。