从 dangerouslySetInnerHTML 反应返回标记答案

【问题标题】：react return markup from dangerouslySetInnerHTML从 dangerouslySetInnerHTML 反应返回标记
【发布时间】：2019-09-24 00:32:19
【问题描述】：

我从所见即所得编辑器中保存了 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

【问题讨论】：

【解决方案1】：

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

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

更新：

Highlight 组件已经有一个属性innerHTML。在您的情况下，您不需要使用 dangerouslySetInnerHTML。

来自官方Documentation：

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

【讨论】：