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

JSX 不是由字符串组成的。

您的数据应该只包含您要打印的句子。我建议将您的后端配置更改为 return 以下 :

{'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

你可以试试 dangerouslySetInnerHTML

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

html 渲染没有发生

html render is not happening

reactjs

redux-saga