Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг Управление проектами
04 Апр 2023
1 мин
146

Рендеринг HTML-строки в реальный HTML

Есть распространенная проблема, возникающая при попытке вставить строку HTML в компонент с использованием React. Допустим, есть компонент, который получает

Есть распространенная проблема, возникающая при попытке вставить строку HTML в компонент с использованием React. Допустим, есть компонент, который получает свойство в виде строки HTML. Обычный способ вставить эту строку в компонент — использовать dangerouslySetInnerHTML.

Пример кода:

<div dangerouslySetInnerHTML={{ __html: «<h1>Привет, мир!</h1>» }} />

В этом случае строка HTML отображается как реальный HTML. Однако, что если HTML-строка приходит из свойства?

Пример кода:

<div dangerouslySetInnerHTML={{ __html: this.props.htmlString }} />

Такой код не будет работать, и HTML-строка будет отображаться как обычная строка, а не как HTML.

Это происходит потому, что dangerouslySetInnerHTML ожидает объект, свойство которого __html содержит HTML-строку. Вместо этого, он получает объект, свойство __html которого содержит еще один объект (свойство), что вызывает ошибку.

Решение

Чтобы решить эту проблему, необходимо убедиться, что HTML-строка передается в dangerouslySetInnerHTML как строка, а не как свойство объекта.

Вот как это может выглядеть в коде:

<div dangerouslySetInnerHTML={{ __html: this.props.htmlString.toString() }} />

Таким образом, HTML-строка будет отображаться как реальный HTML, как и ожидалось.

Важно помнить, что использование dangerouslySetInnerHTML может повысить риск XSS-атак, поэтому всегда необходимо обрабатывать входные данные, чтобы избежать вставки вредоносного кода.

Проверь как ты усвоил материалы статьи
Пройди тест и узнай насколько ты лучше других читателей

Добавить комментарий