使用React显示HTML格式的文本时出现不变违规错误

Question

我正在构建一个React应用程序,需要使用外部API来获取一些文本.问题是文本以带有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

似乎目前无法捕获渲染函数中的错误,所以我不能忽略有问题的并继续.

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

Answer 1

这个问题实在是太玄妙了！我注意到，有时我尝试显示的文本片段包含<或>，这似乎会导致 React 失败。

我对想要保留的标签进行了正则表达式替换（将它们替换为@@@带有类的起始标签和***结束标签），删除了<or的所有实例>，然后用其原始标记替换了占位符。

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