获取API-如何将JSON转换为HTML

我正在使用fetchapi从数据库获取信息

问题是数据库中的信息包含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>
    );
  }
}

componentWillMount（）{
取（'http://localhost:3001/perguntas')
.然后（功能（响应）{
if（response.ok）{
返回response.json（）；
}
抛出新错误（'网络响应不正常'）；
})
。然后（resultado=>{
this.setState（{lista:resultado}）
})
.catch（函数（错误）{
console.log（'提取操作出现问题：'，错误.message）；
});
}
render（）{
返回(
{
this.state.lista.map（函数（数据）{
返回(
Pergunta:{data.body}
);
})
}
);
}
}

结果是：

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>

Pergunta:LEIA O TEXTO.
A ESCOLA
A TODO DIA，
NA ESCOLA，
A PROFESSORA，
O PROFESSOR.
A GENTE APRENDE，
E BRINCA MUITO
COM DESENHO，
TINTA E COLA.
；O QUERIDOS
法泽姆·法拉，
法泽姆·费拉。
O PAULINHO，
O PEDRÃ；O、 
一个零件Í；中央情报局
E A PRISCILA.
QUANDO TOCA
O SINAL，
NOSSA AULA
CHEGA AO FIM.
ATÉ；AMANHÃ
Amiginhos，
NÃ；O SE-ESQUEÇ；AM，NÃ；O、 
DE MIM…
CLÁ；乌迪奥提巴斯。朋友们，佩托。贝洛·奥里藏特：FORMATO，1996年。第8-9页。
；TEXTO EST和Atilde也是如此；哦

关键是我需要JSON来重复itens和.map（）

但我不知道如何将此文本转换为html标记

---

谢谢。

数据。正文可能是html转义的。您可以尝试像下面建议的那样取消它的显示，但是不建议将字符串呈现为html，除非您完全信任源代码。从不呈现用户输入的html字符串

从

函数htmlDecode（输入）{
var e=document.createElement（'div'）；
e、 innerHTML=输入；
返回e.childNodes.length==0？“：e.childNodes[0].nodeValue；
}
htmlDecode（“imgsrc='myimage.jpg'”）；
//返回“”
您需要使用React在React元素中显示随机HTML内容

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

危险的LysetinerHTML
是React在中使用innerHTML的替代品
浏览器是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>
}

render（）{
返回
佩尔冈塔：
}
大家好，谢谢回复

现在我将使用@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>
  );
 })
}

{
this.state.lista.map（函数（数据）{
返回(
);
})
}
Hi Fellipe，欢迎来到stackoverflow。你的问题很清楚，但是到目前为止你都做了些什么呢？
{
 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>
  );
 })
}