Лучший способ рендеринга электронных писем в формате HTML в приложении React

Question

Я создаю приложение SPA React, которое может отправлять и получать сообщения электронной почты.

Каков наилучший способ отображения полученных сообщений электронной почты в формате HTML?Задача становится проблематичной, когда я получаю огромное сообщение электронной почты с большим количеством изображений в тегах base64 и HTML.

Я получаю письмо в виде HTML-строки JSON от API и хочу правильно его отобразить.

Я попробовал два подхода:

1. Визуализация в div с dangerouslySetInnerHTML={{ __html: htmlMessageText }} - есть проблема с безопасностью
2. Используйте мой редактор электронной почты в режиме предварительного просмотра ( Jodit ) - есть проблема с Layout Thrashing

В обоих подходах есть проблема с производительностью.Электронные письма (800 строк) отрисовываются много времени (~ 2 минуты).

С простыми электронными письмами в формате HTML нет проблем, они отображаются быстро, но с некоторыми из них - особенно большими электронными письмами - приложение любит заморозить макет.

Answer 1

Проблемы с производительностью вызваны большими изображениями URI данных.Проблемы безопасности могут быть решены с помощью библиотеки дезинфицирующих средств.Таким образом, ваш алгоритм может выглядеть следующим образом:

1. Заменить data: URI на blob:.Для вдохновения вы можете проверить соответствующую часть в коде TinyMCE .
2. Теперь, когда после шага 1 осталось намного меньше разметки, пропустите ее через дезинфицирующее средство HTML.Я бы порекомендовал DOMPurify .
3. dangerouslySetInnerHTML

Answer 2

Вы можете использовать элементы 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 3

Вы можете попробовать анализатор HTML для React ... https://www.npmjs.com/package/react-html-parser.