原始HTML在React组件中的DOM上呈现
原始HTML在React组件中的DOM上呈现
提问于 2018-12-12 23:05:27
我从API得到了下面的响应，我想将它转换成合适的html，并想在dom上呈现它，但它呈现的是原始html和特殊字符。
接口响应示例：
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，但它不起作用。
回答 1
Stack Overflow用户
发布于 2018-12-13 00:46:10
您必须将字符串中的任何html字符替换为相应的标记。因为在您的示例中只有"<p> (对应于<p>)，所以您可以这样做：
验证this.props.story.desp是否具有值a是否为字符串，然后替换：
<span
className="newsDescription"
dangerouslySetInnerHTML={{ __html: this.props.story.desp.replace(/</g, '<').replace(/>/g, '>')}}
/>这将在包含文本的<span>中生成一个包含<p>元素(来自您的应用编程接口的段落元素)的<span>元素。另外，请注意这将替换用于创建段落标记的所有匹配项。
不幸的是，没有通用的普通javascript函数来替换所有可能的标签。
请注意，我将<p>标记更改为<span>，因为块元素内部不应该有其他块元素。看看this question in SO吧。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53745883
复制相关文章
相似问题
腾讯云开发者
