使用ReactJS在页面上显示HTML正文内容

Question

使用ReactJS在页面上显示HTML正文内容

3

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

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

我已经使用ReactJS从我的数据库正确获取了数据。如何在“localhost:3000/play”中显示它？我不希望它只是呈现为原始数据，就像代码一样，而是希望它实际上将html正文呈现为网站（标题设置为Test，并显示一个小文本：testing website）。在ReactJS中，我该如何做到这一点？我已经配置了/play，我只想知道如何在index.js文件中显示它。我尝试了类似于<div dangerouslySetInnerHTML={template} />的东西，但它没有起作用。

- Rayes

请确保您的“template”是一个JSON，格式为{__html：'First＆middot; Second'}。其中“__html”属性非常重要。 - christopher_pk

我所做的是：const innerHtml = { __html: snapshot.val() } return(<div dangerouslySetInnerHTML={innerHtml} />)，当我记录innerHtml时，我得到了这个 {__html: "<html> <title>Test</title> <body>testing website</body> </html>"}。 - Rayes

https://jaketrent.com/post/update-body-class-react/ - I_Al-thamary

2个回答

0

请尝试：

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

- Midhun G S

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Rayes · Accepted Answer

所以，我用以下方法解决了问题：在一个单独的函数中：

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

然后在渲染中：

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