Question

我创建了一个可以发送和接收电子邮件的SPA React应用程序。

呈现收到的HTML电子邮件的最佳方法是什么？当我收到一封包含大量base64和HTML标签中的图像的电子邮件时，任务变得很麻烦。

我从API收到电子邮件作为JSON HTML字符串，并希望将其正确呈现。

我尝试了两种方法：

使用dangerouslySetInnerHTML={{ __html: htmlMessageText }}在div中渲染-安全存在问题

在预览模式（Jodit）中使用我的电子邮件编辑器-Layout Thrashing有问题

在两种方法中，性能都有问题。电子邮件（800行）占用大量时间（约2分钟）。

简单的HTML电子邮件没有问题，它们可以快速呈现，但是其中一些（尤其是较大的电子邮件）应用程序喜欢冻结布局。

Answer 1

您可以尝试使用HTML进行React解析器... https://www.npmjs.com/package/react-html-parser。

Answer 2

性能问题是由大数据URI图像引起的。安全问题可以通过消毒剂库解决。因此您的算法可能如下所示：

将data: URI替换为blob:。要获得灵感，您可以查看the relevant part in the code of TinyMCE。
现在，在执行步骤1之后，剩下的标记要少得多，将其传递给HTML清理器。我会推荐DOMPurify。
dangerouslySetInnerHTML

Answer 3

您可以使用ref元素在您的react组件中传递HTML

class Demo extends Component {
    constructor(props) {
        super(props);

    }

    render() {
         //Here you can add your Html code 
         //or you can pass by props or any state
         this.el.innerHTML = '';

        return (
            <div ref={el => this.el = el}>
            </div>
        );
    }

}

export default Demo

在React应用中呈现HTML电子邮件的最佳方法

3 个答案: