如何在 React js 中将 HTML 模板呈现为来自 json 的响应

Posted

技术标签:

【中文标题】如何在 React js 中将 HTML 模板呈现为来自 json 的响应【英文标题】:How to render HTML Template as response from json in react js 【发布时间】:2021-09-23 12:16:18 【问题描述】:

我的 api 响应是


"content" : "<div><p>Some random text</p></div>"


我将 html 模板作为 json 响应内容中的值传递。 在我的应用程序中,我试图渲染内容,但输出是

我的输出:&lt;div&gt;&lt;p&gt;Some random text&lt;/p&gt;&lt;/div&gt;

实际输出应该是:Some random text

谁能指导我错过了什么?

【问题讨论】:

【参考方案1】:

您还可以签出dangerouslySetInnerHTML 来为您获得的 HTML 设置 innerHTML 作为响应字符串。

...
return (
  ...
  <div dangerouslySetInnerHTML= __html: data.content  />
  ...
)
...

【讨论】:

这解决了问题,但开发人员应该注意跨站点脚本 (XSS) 攻击,因此只有在数据源像应用管理员管理的东西一样受信任的情况下才使用它。跨度> 【参考方案2】:

为了将原始 HTML 转换为 React DOM 结构,您需要一个库:html-to-react

【讨论】:

以上是关于如何在 React js 中将 HTML 模板呈现为来自 json 的响应的主要内容,如果未能解决你的问题,请参考以下文章

如何在 express.js 玉模板中呈现 markdown?

在 React.js 中,我如何从组件的字符串表示中呈现组件?

React js:在单页应用程序中呈现多个索引 html

如何在 Django 中将多个上下文呈现为相同的 HTML

如何在 React 中将状态传递回父级?

在 React.js 中将字符串转换为真实的 HTML