在React中使用HTML / CSS渲染電子郵件

Question

我正在從gmail提取電子郵件，並使用CSS標記抓取了html。 我想在React應用中渲染它，但是react將其解釋為字符串vs html。

我該如何告知渲染HTML / CSS？

var AnotherComponent = React.crateClass({
  render: function() {
    return (
      <div>{this.props.html_email}</div>
    )
  }
})

var Test = React.createClass({
  render: function() {
    return (
      <AnotherComponent html_email = {this.props.html_body} />
    )
  }
})

在這種情況下， html_body是

<div><p style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt;" data-mce-style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-family: Arial; color: #222222; vertical-align: baseline; white-space: pre-wrap;" data-mce-style="font-family: Arial; color: #222222; vertical-align: baseline; white-space: pre-wrap;">SOME TEXT</span></p><br><p style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt;" data-mce-style="line-height: 1.15; margin-top: 0pt; margin-bottom: 0pt;"><span style="font-family: Arial; color: #222222; vertical-align: baseline; white-space: pre-wrap;" data-mce-style="font-family: Arial; color: #222222; vertical-align: baseline; white-space: pre-wrap;">

它以字符串形式顯示所有html，而只是SOME TEXT

Answer 1

這樣做是因為您像這樣通過了它。 如果您確實需要這樣做，則應該執行以下操作：

var AnotherComponent = React.crateClass({
  render: function() {
    return (
      <div dangerouslySetInnerHTML={{__html: this.props.html_email}}</div>
    )
  }
})

但是你不應該。 從文檔：

通常，從代碼設置HTML是有風險的，因為很容易無意間使您的用戶遭受跨站點腳本（XSS）攻擊

閱讀更多

Answer 2

除了@Piotr解決方案之外，您還可以解析HTML並自行呈現。 您只應呈現有效標簽的子集，以防止討厭的XSS攻擊。

您還可以使用一些現有的解決方案，例如react-html-parser或其他HTML解析器。