在 React 中从 JSON 返回 HTML 元素

2020-09-24 08:00:00 · 飞浪

本指南将引导您完成直接从 JSON 响应在页面上呈现 HTML 元素的过程，从而允许您保留文本格式。

介绍

许多现代 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 是有风险的，因为它很容易无意中将用户暴露给跨站点脚本攻击，这就是它如此命名的原因。因此，您应该谨慎并意识到您的应用暴露的漏洞。

_{免责声明：本内容来源于第三方作者授权、网友推荐或互联网整理，旨在为广大用户提供学习与参考之用。所有文本和图片版权归原创网站或作者本人所有，其观点并不代表本站立场。如有任何版权侵犯或转载不当之情况，请与我们取得联系，我们将尽快进行相关处理与修改。感谢您的理解与支持！}

_查看原文

技术指南

阅读全文

在 React 中从 JSON 返回 HTML 元素

杭州电子商务研究院

4年前 · 面向社会、服务行业、政产学研结合、整合资源、和谐发展

import React from 'react'; const RenderHTML=()=>{ const htmlPart='<p>Welcome to this <strong>page</strong></p>' return( <div dangerouslySetInnerHTML={ {__html: htmlPart} } /> ) }