原始HTML正在React組件中的DOM上呈現

Question

我收到來自API的響應，並且想將其轉換為適當的html並希望在dom上呈現它，但它呈現的是原始html和特殊字符。

示例api響應：

resp = {
  body: "<p>Cali Thirty Seven turned what appeared to be certain defeat into an exhilarating and much-deserved victory late Saturday afternoon at Gulfstream Park. She reasserted herself after relinquishing the lead to 8-5 favorite Stormy Victoria to successfully defend her title in the $100,000 Powder Break Stakes.</p>\r\n<p>"
} 

在react組件中，我通過以下方式渲染它：

<p
  className="newsDescription"
  dangerouslySetInnerHTML={{ __html:this.props.story.desp }}
/>

我試圖逃脫html，但無法正常工作。

Answer 1

您必須將字符串中包含的所有html字符替換為相應的標記。 由於在您的示例中，您只有"<p> （與<p>相對應），因此可以執行以下操作：

驗證this.props.story.desp是否具有值a是字符串，然后替換：

<span
  className="newsDescription"
  dangerouslySetInnerHTML={{ __html: this.props.story.desp.replace(/&lt;/g, '<').replace(/&gt;/g, '>')}}
/>

這將生成一個<span>與元素<p>元素內部（段落元素從您的API來） <span>你的文字。 另外，請注意，這將替換所有創建段落標簽的情況。

不幸的是，沒有通用的普通javascript函數來替換所有可能的標簽。

請注意，我將<p>標記更改為<span>因為塊元素內部不應包含其他塊元素。 看看SO中的這個問題 。