從危險地反應返回標記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>