Question

我收到了来自API的响应，我想将其转换为正确的html，并希望在dom上进行渲染，但是它正在渲染原始html和特殊字符。

示例api响应：

resp = {
  body: "&lt;p&gt;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.&lt;/p&gt;\r\n&lt;p&gt;"
}

在react组件中，我通过以下方式渲染它：

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

我试图转义html，但是它不起作用。

Answer 1

您必须将字符串中包含的所有html字符替换为相应的标记。由于在您的示例中您只有"（与对应），因此可以执行以下操作：

验证this.props.story.desp的值a是否为字符串，然后替换：

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

这将在文本内生成一个元素和一个元素（该段落元素来自您的API）。另外，请注意，这将替换所有创建段落标记的情况。

很遗憾，没有通用的普通javascript函数来替换所有可能的标记。

请注意，我将标记更改为，因为块元素内部不应包含其他块元素。看看this question in SO。

原始HTML正在React组件中的DOM上呈现

1 个答案: