Вебинары Разобраться в IT Реферальная программа
Программирование Аналитика Дизайн Маркетинг
ПРИХОДИТЕ УЧИТЬСЯ НОВОЙ ПРОФЕССИИ ЛЕТОМ СО СКИДКОЙ ДО 70% Забронировать скидку
10 Июл 2023
1 мин
121

Рендеринг 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-атак, поэтому всегда необходимо обрабатывать входные данные, чтобы избежать вставки вредоносного кода.

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

Подарок
Забрать подарок