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

Question

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

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

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

我尝试了两种方法：

Render in div with dangerouslySetInnerHTML={{ __html: htmlMessageText }} - there is problem with safety

Use my email editor in preview mode (Jodit) - there is problem with Layout Thrashing

这两种方法都存在性能问题。电子邮件（800 行）呈现大量时间（~2 分钟）。

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

Answer 1

您可以尝试 HTML 来响应解析器...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

你可以在你的 React 组件中使用 ref 元素传递 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

Answer 4

我们找到了解决此问题的库。它被称为react-letter。

我们也遇到了同样的问题。我们最初用于净化 html 并将 html 转换为 uri 并将其传递给 iframe。它有效，但如果 uri 超过 2mb，它就会中断。 react-letter 库目前正在运行。

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

Best way to render HTML emails in React app

javascript

html-email

reactjs