Часто при создании веб-приложений с использованием React возникает ситуация, когда необходимо вставить HTML-код внутрь JSX с помощью переменной. Например, у вас есть переменная, содержащая строку с HTML-разметкой, и вы хотите вставить эту разметку внутрь компонента React.
var htmlString = «<p>Это мой HTML код <strong>с жирным текстом</strong></p>»;
function MyComponent() {
return (
<div className=»myDiv»>{htmlString}</div>
);
}
Однако, если вы так сделаете, то в результате внутри элемента div будет отображаться строка текста, а не HTML-разметка. Это связано с тем, что React по умолчанию экранирует все строки, чтобы предотвратить атаки с использованием вредоносного кода (такие атаки называются XSS — Cross-Site Scripting).
Для того, чтобы вставить HTML-разметку из строки, вам потребуется использовать специальный атрибут dangerouslySetInnerHTML. Этот атрибут позволяет вставить HTML-разметку прямо внутрь элемента.
function MyComponent() {
return (
<div className=»myDiv» dangerouslySetInnerHTML={{ __html: htmlString }}></div>
);
}
В данном примере, HTML-разметка из строки htmlString будет вставлена внутрь элемента div.
Однако, стоит помнить, что использование dangerouslySetInnerHTML может представлять угрозу безопасности, если вы вставляете HTML-разметку, содержимое которой не контролируете. Например, если HTML-разметка формируется на основе данных, введенных пользователем, то это может привести к атакам XSS. Поэтому всегда убедитесь, что контент, который вы вставляете с помощью dangerouslySetInnerHTML, безопасен.
Добавить комментарий