PassFront
  1. PassFront
  2. База знаний
  3. Основы HTML

Как отрендерить HTML в JSX?

Основы HTML

В JSX строку с HTML нельзя просто вывести в {} — React её экранирует. Отрендерить HTML можно через `dangerouslySetInnerHTML` или парсер в React-элементы.

dangerouslySetInnerHTML

<div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(html) }} />

Перед вставкой HTML обязательно очищают (DOMPurify), иначе возможна XSS-атака.

Парсер в элементы

import parse from 'html-react-parser';

<div>{parse(html)}</div>;

HTML превращается в React-элементы; можно заменять теги своими компонентами (например, <a> на <Link>).

Если это markdown

Лучше рендерить исходный markdown библиотекой react-markdown — она не создаёт сырой HTML.

Коротко для собеседования

Через dangerouslySetInnerHTML с санитайзером или через парсер html-react-parser; просто {html} выведет строку как текст.

Подробнее: React — dangerouslySetInnerHTML

Другие вопросы раздела