Как рендерить html из строки?

В React для рендеринга HTML из строки можно использовать несколько подходов. Рассмотрим два наиболее распространенных способа:

1) Использование метода dangerouslySetInnerHTML:
Метод dangerouslySetInnerHTML позволяет установить HTML-содержимое элемента React как строку. Однако, такой способ следует использовать с осторожностью, поскольку он может привести к уязвимостям безопасности.

Пример:

   function App() {
     const htmlString = "<h1>Пример рендеринга HTML из строки</h1>";
     return <div dangerouslySetInnerHTML={{ __html: htmlString }} />;
   }

2) Использование библиотеки DOMPurify:
DOMPurify - это библиотека, которая позволяет безопасно рендерить HTML-код в React-компонентах. Она фильтрует и удаляет потенциально опасные элементы и атрибуты HTML.

Пример:

   import DOMPurify from "dompurify";

   function App() {
     const htmlString = "<h1>Пример рендеринга HTML из строки</h1>";
     const sanitizedHtml = DOMPurify.sanitize(htmlString);
     return <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />;
   }

Оба этих способа позволяют рендерить HTML-разметку из строки в React-компонентах. Однако, перед использованием следует оценить потенциальные угрозы безопасности и обязательно фильтровать или санитизировать HTML-код, чтобы предотвратить возможные атаки XSS (межсайтового скриптинга).