> Что такое dangerouslySetInnerHTML в React и для чего он нужен (React)

Уровень: junior · Роль: frontend · Категория: Технические вопросы

Компании: ООО Рокет Тех

Стек: React

> Пример ответа

dangerouslySetInnerHTML - это аналог свойства innerHTML в React. Он позволяет вставлять сырой HTML-код напрямую в DOM-элемент, минуя стандартные механизмы рендеринга React (которые экранируют строки для защиты от XSS-атак).

Используется в крайних случаях, когда нужно отобразить HTML, полученный из доверенного источника (например, из CMS или серверного рендеринга с предварительной санитизацией).

Синтаксис: <div dangerouslySetInnerHTML={{ __html: '<p>Текст</p>' }} />

Название намеренно пугающее, чтобы напомнить разработчику о рисках: если вставляемый HTML содержит вредоносный скрипт, это приведёт к уязвимости. Без острой необходимости лучше избегать этого подхода и использовать компоненты React для безопасного рендеринга.

> ГОТОВЫ К СЛЕДУЮЩЕМУ СОБЕСЕДОВАНИЮ?

Запустите тренировочную сессию с ИИ и получите детальную обратную связь, чтобы увереннее проходить реальные интервью