从危险地反应返回标记SetInnerHTML

Question

我从wysiwyg编辑器中保存了html，并从数据库中获取了html，我需要显示我通常使用的内容

 <div dangerouslySetInnerHTML={{__html: content}} />

但现在我需要在另一个组件中使用格式化的内容，

所以我希望是否有一个函数可以像这样返回标记var formattedContent = getMarkup（content）//期望这样做可以完成危险的SetInnerHTML

<Highlight search="Condominium" >
    {formattedContent}
</Highlight>

因为这不起作用

<Highlight search="Condominium" >
      <div dangerouslySetInnerHTML={{__html: content}} />
</Highlight>

感谢任何帮助，因为我几乎每天都在为此苦苦挣扎。

我在上面尝试的是

npmjs.com/package/react-highlighter-突出显示匹配的单词，但我不仅要突出显示纯文本，还要突出显示html

Answer 1

dangerouslySetInnerHTML值是一个以__html为键，而您的HTML内容为值的对象。

<Highlight search="Condominium" >
    <div dangerouslySetInnerHTML={{__html: content}} />
</Highlight>

更新：

Highlight组件已经具有一个属性innerHTML 。 在这种情况下，您无需dangerouslySetInnerHTML地使用dangerouslySetInnerHTML 。

从官方文件 ：

<Highlight innerHTML={true}>{content}</Highlight>