Fetch API - 如何将 JSON 转换为 HTML答案

【问题标题】：Fetch API - How to transform JSON into HTMLFetch API - 如何将 JSON 转换为 HTML
【发布时间】：2018-06-13 12:26:12
【问题描述】：

我正在使用 fetch API 从数据库中获取信息。

问题是数据库中的信息包含 html 标记。一旦我通过 json 它就会把它变成文本并且 html 标签出现在屏幕上。

我的代码：

  componentWillMount(){

    fetch('http://localhost:3001/perguntas')
      .then(function(response) {
        if(response.ok) {
          return response.json();
        }
        throw new Error('Network response was not ok.');
      })
      .then(resultado => {
        this.setState({ lista: resultado })
      })
      .catch(function(error) {
        console.log('There has been a problem with your fetch operation: ', error.message);
      });



  }

  render() {
    return (
      <div>
        <NavBar />
        <div className="row ml-0 mr-0">
          <VerticalNav />
          <div className="col-11 pl-0 pr-0">
            <div className="container">
              {
                this.state.lista.map(function(data){
                  return (
                    <div className="row mt-5" key={data.id}>
                      <div className="col-12"><b>Pergunta:</b> {data.body}</div>
                    </div>
                  );
                })
              }
            </div>
          </div>
        </div>
      </div>
    );
  }
}

结果是：

Pergunta: <p><span style="font-size: 14pt;">LEIA O TEXTO.</span></p>  <p class="Standard"><span style="font-size: 12pt;"><strong>A ESCOLA</strong></span><br /><span style="font-size: 12pt;"> TODO DIA,</span><br /><span style="font-size: 12pt;"> NA ESCOLA,</span><br /><span style="font-size: 12pt;"> A PROFESSORA,</span><br /><span style="font-size: 12pt;"> O PROFESSOR.</span><br /><span style="font-size: 12pt;"> A GENTE APRENDE,</span><br /><span style="font-size: 12pt;"> E BRINCA MUITO</span><br /><span style="font-size: 12pt;"> COM DESENHO,</span><br /><span style="font-size: 12pt;"> TINTA E COLA.</span><br /><span style="font-size: 12pt;"> MEUS AMIGOS</span><br /><span style="font-size: 12pt;"> T&Atilde;O QUERIDOS</span><br /><span style="font-size: 12pt;"> FAZEM FARRA,</span><br /><span style="font-size: 12pt;"> FAZEM FILA.</span><br /><span style="font-size: 12pt;"> O PAULINHO,</span><br /><span style="font-size: 12pt;"> O PEDR&Atilde;O,</span><br /><span style="font-size: 12pt;"> A PATR&Iacute;CIA</span><br /><span style="font-size: 12pt;"> E A PRISCILA.</span><br /><span style="font-size: 12pt;"> QUANDO TOCA</span><br /><span style="font-size: 12pt;"> O SINAL,</span><br /><span style="font-size: 12pt;"> NOSSA AULA</span><br /><span style="font-size: 12pt;"> CHEGA AO FIM.</span><br /><span style="font-size: 12pt;"> AT&Eacute; AMANH&Atilde;,</span><br /><span style="font-size: 12pt;"> AMIGUINHOS,</span><br /><span style="font-size: 12pt;"> N&Atilde;O SE ESQUE&Ccedil;AM, N&Atilde;O,</span><br /><span style="font-size: 12pt;"> DE MIM...<br /></span><span style="font-size: 8pt;">CL&Aacute;UDIO THEBAS<em>. AMIGOS DO PEITO.</em> BELO&nbsp;HORIZONTE: FORMATO, 1996. P. 8-9.</span></p>  <p class="Standard" style="font-size: 9pt;"><span style="font-size: 14pt;">ONDE AS CRIAN&Ccedil;AS DO TEXTO EST&Atilde;O?</span></p>

关键是我需要 JSON 来重复 itens 和 .map()。

但我不知道如何转换此文本以正确读取 html 标签。

谢谢。

【问题讨论】：

嗨，费利佩，欢迎来到 stackoverflow。你的问题很清楚，但到目前为止你尝试了什么？

标签： html json reactjs fetch-api

【解决方案1】：

data.body 可能是 html 转义。您可以尝试按照下面的建议取消转义，但不建议将字符串呈现为 html，除非您完全信任源。从不渲染用户输入的 html 字符串。

来自https://css-tricks.com/snippets/javascript/unescape-html-in-js/

function htmlDecode(input){
    var e = document.createElement('div');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
}

htmlDecode("&lt;img src='myimage.jpg'&gt;"); 
// returns "<img src='myimage.jpg'>"

【讨论】：

【解决方案2】：

您需要使用 React 的 dangerouslySetInnerHTML 在 React 元素中显示随机 HTML 内容。

请仔细检查here，并确保您了解并接受在您的应用程序中注入随机 HTML 内容的风险。

dangerouslySetInnerHTML 是 React 在浏览器 DOM。一般来说，从代码中设置 HTML 是有风险的，因为很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击。

用法：

render() {
    return <div className="row mt-5" key={data.id}>
        <div className="col-12">Pergunta: 
            <div dangerouslySetInnterHTML={__html: data.body} />
        </div>
    </div>
}

【讨论】：

【解决方案3】：

大家好，感谢您的回复。

现在我将使用@Arash Motamedi 解决方案。因为此信息仅供阅读，我信任源数据库。

我对代码做了一点改动：

{
 this.state.lista.map(function(data){
   return (
   <div className="row mt-5" key={data.id}>
      <div
        className="col-12 pergunta"
        dangerouslySetInnerHTML = {{ __html : '<h3><b>Pergunta:</b></h3></br>' + data.body }}>
     </div>
   </div>
  );
 })
}

【讨论】：