javascript - 在react中显示纯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>

我想要这样的东西:

Sample text with bold and italic

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

Answer 1

尝试作为属性插入angerlySetInnerHTML={{__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