我在玩 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 中以正确的方式做到这一点。我可以像在 jQuery 中一样获取对 div 的引用并以某种方式更新它吗？它是否与虚拟 Dom 一起使用？
尝试作为属性危险地插入SetInnerHTML={{__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
如果你想保留双引号，你也可以危险地设置innerHTML：
function ShowHtml(props) {
let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
return (
<div dangerouslySetInnerHTML={{__html: body}}>
</div>
)
}
尝试删除双引号，或者如果您想保留可以使用的双引号 dangerouslySetInnerHTML
function ShowHtml(props) {
let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
return (
<div dangerouslySetInnerHTML={{__html: body}}/>
)
}
您可以使用dangerouslySetInnerHTML在 react 组件中渲染 html：
renderBodyContents = () => {
return {__html: this.state.body}
}
...
render(){
return(
<p> dangerouslySetInnerHTML={this.renderBodyContents()}></p>
)
}