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

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

Answer 2

您可以尝试危险地使用SetInnerHTML

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

html渲染没有发生

2 个答案: