在 React 中使用 HTML/CSS 渲染电子邮件答案

【问题标题】：Rendering email with HTML/CSS in React在 React 中使用 HTML/CSS 渲染电子邮件
【发布时间】：2017-04-20 02:10:17
【问题描述】：

我正在从 gmail 获取一封电子邮件，并获取了带有 CSS 标记的 html。我想在 React 应用程序中呈现它，但 React 将它解释为字符串与 html。

如何告诉 react 渲染 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

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

它确实是因为你这样传递它。如果你真的需要这样做，你应该这样做：

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

但你不应该。来自文档：

一般来说，从代码中设置 HTML 是有风险的，因为它很容易无意中将您的用户暴露给跨站点脚本 (XSS) 攻击

【讨论】：

啊，好的。这只是一个内部应用程序，我只是在我的本地主机上运行以生成报告:-)

【解决方案2】：

除了@Piotr 的解决方案，您还可以解析 HTML 并自行呈现。您应该只呈现有效标签的子集，以防止讨厌的 XSS 攻击。

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

【讨论】：