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

Question

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

呈现收到的 HTML 电子邮件的最佳方式是什么？当我收到一封包含大量 base64 和 HTML 标签图像的巨大电子邮件时，该任务就会出现问题。

我收到了来自 API 的 JSON HTML 字符串形式的电子邮件，并希望正确呈现它。

我尝试了两种方法：

1. 在 div 中渲染dangerouslySetInnerHTML={{ __html: htmlMessageText }}- 存在安全问题
2. 在预览模式下使用我的电子邮件编辑器 ( Jodit ) -布局抖动有问题

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

简单的 HTML 电子邮件没有问题，它们呈现速度很快，但其中一些 - 特别是较大的电子邮件 - 应用程序喜欢冻结布局。

Answer 1

性能问题是由大数据 URI 图像引起的。安全问题可以通过消毒剂库来解决。所以你的算法可能是这样的：

1. 将data:URI替换为blob:. 您可以查看TinyMCE 代码中的相关部分以获得灵感。
2. 现在，在第 1 步之后，剩下的标记要少得多，将其传递给 HTML 消毒剂。我会推荐DOMPurify。
3. dangerouslySetInnerHTML