Fetch API - 如何将 JSON 转换为 HTML

Question

我正在使用提取 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 标签。

谢谢。

Answer 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'>"

Answer 2

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

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

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack.

用法：

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

Answer 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>
  );
 })
}

Fetch API - 如何将 JSON 转换为 HTML

Fetch API - How to transform JSON into HTML

html

json

reactjs

fetch-api