HTML渲染没有发生

Question

我已经收到来自像后端JSON响应：

{'status': 0, 'type': 'BASIC_HTML', 'content': '<h1>Hello World </h1>'}

我渲染HTML响应为：

if (props.text.type == "BASIC_HTML") {
    return (
        <div>
            {props.text.content}
        </div>
    )
}

但是输出当属<h1>Hello World </h1>

它不来为HTML。请帮忙。

Answer 1

您可以尝试dangerouslySetInnerHTML

   if (props.text.type == "BASIC_HTML") {
      return (
         <div>
             <h1 dangerouslySetInnerHTML={{__html: props.text.content}}></h1>
         </div>
      )
  }

Answer 2

JSX是造不出来的字符串。

您的数据应该只包含要打印的句子。我会建议改变你的后端配置返回以下内容：

{'status': 0, 'type': 'BASIC_HTML', 'content': 'Hello World'}

而<h1>节点应写为JSX，而不是一个字符串：

if (props.text.type == "BASIC_HTML") {
    return (
        <div>
            <h1>{props.text.content}</h1>
        </div>
    )
}