Как отрендерить HTML в React

Узнайте, как визуализировать строку HTML в DOM без экранирования с помощью React

У меня была эта проблема - мне нужно было добавить строку HTML в приложение React, исходящую из редактора WYSIWYG, но просто добавив{myString}кJSXэкранировал HTML ... поэтому теги HTML были показаны пользователю!

Как я это решил? В основном я видел 2 решения. Первый родной, второму требовалась библиотека.

Первое решение: используйтеdangerouslySetInnerHTML

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

<div
  dangerouslySetInnerHTML={{
    __html: props.house.description
  }}></div>

Помните, что это называетсяопаснопо причине. В этом случае HTML не экранируется, и это может вызватьXSSвопросы.

Но для этого есть хорошие варианты использования.

Второе решение: используйте стороннюю библиотеку

Существует множество библиотек, реализующих функции, которыеdangerouslySetInnerHTMLпредоставляет более простым способом.

Один из них -react-html-parserбиблиотека.

См. Библиотеку на GitHub:https://github.com/wrakky/react-html-parser

Предупреждение: на момент написания он не обновлялся последние 2 года, поэтому в будущем что-то может сломаться. У меня это сработало.

Какой использовать?

Вы можете поискать другие похожие библиотеки, но в конце концов я решил использоватьdangerouslySetInnerHTMLпуть.

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

Скачать мою бесплатнуюСправочник по React


Больше руководств по реакции:


Tech Wiki Online!