介绍
许多现代 Web 应用都能够格式化输入文本，例如添加缩进、更改字体大小或字体样式、使文本变为粗体或斜体等等。这些应用通过将内容及其标记存储在数据库中来保留该文本的格式。然后，服务器将整个标记作为字符串返回到前端，前端从该 JSON 返回 HTML 元素以在页面上显示它们。
本指南将引导您完成直接从页面上的 JSON 响应呈现 HTML 元素的过程。
使用 dangerouslySetInnerHTML prop
在 React 中，你可以使用dangerouslySetInnerHTML属性设置容器的内部 HTML 。因此，如果你使用以下 JavaScript 行来设置<div>容器的内部 HTML...
const htmlDiv=document.querySelector('div');
const htmlPart='<p>Welcome to this <strong>page</strong></p>'
htmlDiv.innerHTML=htmlPart;
... 您可以通过将dangerouslySetInnerHTML属性传递给容器，并使用键__html和要将该容器的内部 HTML 设置为的 HTML 值向其传递一个对象来执行相同操作。您可以在 React 中按如下方式执行上述操作：
import React from 'react';
const RenderHTML=()=>{
const htmlPart='<p>Welcome to this <strong>page</strong></p>'
return(
<div dangerouslySetInnerHTML={ {__html: htmlPart} } />
)
}
让我们通过一个详细的例子来看一下实际的实现。
在 React 中实现
在此示例中，您将创建一个虚拟 JSON 响应，其中包含一些 HTML 元素作为字符串并将它们返回到 DOM。此示例中演示的用例涉及一个招聘门户，招聘人员在该门户中发布了一个带有格式化职位描述的职位。在向用户显示此职位时，您必须使用与发布时相同的格式显示职位描述。
创建虚拟 JSON
您可以通过将 JSON 数据存储在 JavaScript 文件中并将其导出为对象来模拟任何 API。使用以下代码创建一个名为data.js的空 JavaScript 文件：
export default {
"Job Description": "<h4> Supply Chain Manager @<strong><i>CargoChainzz Pvt Limited </i></strong></h4><br/><p>This job requires at least 3 years of experience</p>"
}
现在您可以将该对象导入到任何地方。
使用 dangerouslySetInnerHTML prop
将数据对象导入您想要呈现它的组件内。
import data from './data';
您可以直接使用此数据对象，也可以在生命周期钩子中将此对象的必需属性设置为组件的状态。为了简洁起见，我们直接使用该对象。
在一个空的<div>中，传递 dangerlySetInnterHTML 属性，其对象为键__html，其值为data["Job Description"]，因为数据的Job Description属性包含您的 HTML 元素作为字符串。
<div dangerouslySetInnerHTML={{__html:data["Job Description"]}}></div>
现在，来自 JSON 的 HTML 元素已从组件以 JSON 形式返回到 DOM。
结论
dangerlySetInnterHTML属性使用起来很方便，如本指南所示，并且有很多用例。但是，根据 React 的官方文档，从代码中设置 HTML 是有风险的，因为它很容易无意中将用户暴露给跨站点脚本攻击，这就是它如此命名的原因。因此，您应该谨慎并意识到您的应用暴露的漏洞。
免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！
