使用 ReactJS 在页面上显示 HTML 正文答案

【问题标题】：Displaying HTML Body on a page using ReactJS使用 ReactJS 在页面上显示 HTML 正文
【发布时间】：2018-07-09 15:14:35
【问题描述】：

假设我的数据库中有以下代码（用户输入）：

<html>
  <title>Test</title>
  <body>testing website</body>
</html>

我使用 ReactJS 从我的数据库中正确地获取了它。我怎样才能显示这个说：'localhost:3000/play'？我不希望它像代码一样呈现为原始数据，但我希望它实际上将 html 正文呈现为网站。（标题设置为测试，并显示一个小文本：测试网站）。我怎样才能在 ReactJS 中做到这一点？我已经配置了 /play，我只想知道如何在 index.js 文件中显示它。我尝试了类似<div dangerouslySetInnerHTML={template} /> 的方法，但没有成功。

【问题讨论】：

确保您的template 是{__html: 'First &middot; Second'} 形式的json。 __html 属性很重要。
我正在做的是，const innerHtml = { __html: snapshot.val() } return(<div dangerouslySetInnerHTML={innerHtml} />)，当我登录 innerHtml 时，我得到了这个{__html: "<html> <title>Test</title> <body>testing website</body> </html>"}
jaketrent.com/post/update-body-class-react

标签： html reactjs

【解决方案1】：

所以，我用以下方法修复了它：在单独的函数中：

db.getHTMLBody(key).then(snapshot => { this.setState({ body: snapshot.val() }) })

然后在渲染中：

 <div dangerouslySetInnerHTML={{ __html: this.state.body }} />

【讨论】：

【解决方案2】：

请尝试：

const innerHtml = { __html: escape(snapshot.val()) } 
return(<div dangerouslySetInnerHTML={innerHtml} />)

【讨论】：