原始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中的这个问题 。