В React обычное свойство innerHTML заменено на атрибут dangerouslySetInnerHTML. Такое название специально выбрано, чтобы предупредить тебя о потенциальных рисках безопасности.
Чтобы применить этот атрибут, ты должен передать объект с ключом html, который содержит твой HTML-контент в виде строки:
function createMarkup() {
return { html: 'First · Second' };
}
function MyComponent() {
return <div dangerouslySetInnerHTML={createMarkup()} />;
}
Или можешь вставить объект прямо в разметку:
function MyComponent() {
return <div dangerouslySetInnerHTML={{ html: 'First · Second' }} />;
}
Важно: используй dangerouslySetInnerHTML только когда это действительно необходимо. Этот подход несёт серьёзные риски для безопасности, особенно XSS-атаки (межсайтовый скриптинг). Никогда не применяй этот метод с:
Всегда санируй HTML-контент перед рендерингом, если тебе всё же нужен этот атрибут.
Многословное название dangerouslySetInnerHTML выбрано специально — оно подталкивает разработчика тщательно оценить, действительно ли этот подход необходим в его конкретном случае.
Атрибут dangerouslySetInnerHTML требует передачи объекта с ключом html, который содержит HTML-контент в виде строки.
Новый — ещё не проверен сообществом
Вы