Javascript 在react中显示纯html

我在玩react草稿所见即所得编辑器。我进步很好。但现在我陷入了如何显示编辑器输出的困境

例如，假设body是所见即所得编辑器的输出：

function ShowHtml(props) {
  let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
  return (
    <div>
     {body}
    </div>
  )
}

函数ShowHtml（道具）{
让正文=“带有粗体和斜体的示例文本”
返回(
{body}
)
}

现在，输出将是完全相同的html，显示的标记没有格式

<p>Sample text with <strong>bold</strong> and <em>italic</em></p>

带有粗体和斜体的示例文本

我想要这样的东西：

带有粗体和斜体的示例文本

---

在jQuery中，我只需设置div标记的html属性。但我不知道如何正确地反应。我可以像在jQuery中一样获取对div的引用并以某种方式更新它吗？它与虚拟Dom一起工作吗？

尝试删除双引号，或者如果您想保留双引号，可以使用

危险的LysetinerHTML

function ShowHtml(props) {
  let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
  return (
    <div dangerouslySetInnerHTML={{__html: body}}/>


  )
}

函数ShowHtml（道具）{
让正文=“带有粗体和斜体的示例文本”
返回(
)
}

函数ShowHtml（）{
返回(
带有粗体和斜体的示例文本

)
}

尝试作为属性危险地插入SetinenerHTML={{{{uuuHTML:body}

  function ShowHtml(props) {
    let body = '<p>Sample text with <strong>bold</strong></p>'
    return (
     <div  dangerouslySetInnerHTML={{__html: body}} />
    )
  }

函数ShowHtml（道具）{
让正文=“带有粗体的示例文本”
返回(
)
}

---

您可以使用

危险的html

在react组件中呈现html：

renderBodyContents = () => {
  return {__html: this.state.body}
}

...

render(){
  return(
    <p> dangerouslySetInnerHTML={this.renderBodyContents()}></p>
  )
}

renderBodyContents=（）=>{
返回{uuuhtml:this.state.body}
}
...
render（）{
返回(
DangerouslySetinerHTML={this.renderBodyContents（）}>

)
}

如果要保留双引号，还可以危险地设置innerHTML：

   function ShowHtml(props) {
      let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
      return (
       <div dangerouslySetInnerHTML={{__html: body}}>

       </div>
      )
    }

函数ShowHtml（道具）{
让正文=“带有粗体和斜体的示例文本”
返回(
)
}

实际上，body是编辑器的输出。您知道如何将实际字符串转换为JSX吗？谢谢，这很接近，但我认为您的答案是第一个正确答案。这可以在生产中使用吗？虽然这段代码可以回答这个问题，但提供有关如何和/或为什么解决问题的其他上下文将提高答案的长期价值。

   function ShowHtml(props) {
      let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
      return (
       <div dangerouslySetInnerHTML={{__html: body}}>

       </div>
      )
    }