在React中使用HTML/CSS呈現電子郵件

我從gmail獲取電子郵件並使用CSS標記獲取html。我想在React應用中渲染它，但反應是將它解釋爲字符串vs html。在React中使用HTML/CSS呈現電子郵件

如何判斷呈現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;">

它顯示爲一個字符串VS只是SOME TEXT

來源

2016-12-05 Morgan Allen

它不會因爲你通過像這樣所有的HTML。如果你真的需要這樣做，你應該這樣做：

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

但你不應該這樣做。從文檔：

一般來說，從代碼中設置HTML是有風險的，因爲它很容易不經意間你的用戶暴露在跨站點腳本（XSS）攻擊

來源

2016-12-05 16:48:25

啊，好的。這只是一個內部應用程序，只是在我的本地主機上運行以生成報告:-) –

或者到@ Piotr的解決方案可以解析HTML並自行渲染。您應該只渲染有效標籤的子集以防止惡意的XSS攻擊。

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

來源

2016-12-05 16:57:29

在React中使用HTML/CSS呈現電子郵件

回答

相關問題