在反应中显示纯html

Question

我在玩 react-draft-wysiwyg 编辑器。我进步很好。但现在我卡住了如何显示编辑器的输出。

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

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

现在输出将是完全相同的 html，其中显示的标签没有格式化。

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

我想要这样的东西：

粗体 和 斜体 示例文本

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

原文由 Peter Ambruzs 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

尝试作为属性插入 dangerouslySetInnerHTML={{__html: body}}

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

https://reactjs.org/docs/dom-elements.html#dangerouslysetinnerhtml

原文由 Pablo 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果你想保留双引号，你也可以危险地设置 innerHTML：

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

       </div>
      )
    }

原文由 peter 发布，翻译遵循 CC BY-SA 3.0 许可协议