React-порталы и HTML-код, внедренный через опасноSetInnerHTML

У меня есть приложение, в котором пользователи могут получать сообщения от администраторов. Администратор создает сообщение в редакторе WYSIWYG на панели администратора, сообщение сохраняется в виде html-строки в БД, а затем содержимое сообщения вводится через опасно SetInnerHTML в компонент. HTML в сообщениях дезинфицируется, поэтому есть только разрешенные теги и атрибуты (без тегов сценария, без методов обработчика событий для тегов и т. д.).

Все работало, но теперь нам нужно добавить функцию формы в редактор сообщений. Формы создаются в отдельной вкладке на панели администратора, а затем их можно прикрепить к сообщению. В сообщении это выглядит так.

<div data-form-id="12"/>

Пустой div с идентификатором формы. Теперь, когда сообщение отображается в пользовательском приложении, я должен обработать этот тип div и заменить их ожидаемой формой, полученной из базы данных (формы не хранятся как html, они хранятся как указанная структура json).

Сначала я подумал об использовании порталов React, но прочитал, что их следует использовать для изменения внешних элементов HTML, а не элементов внутри приложения React, и использовать их внутри — плохая практика.

Есть какой-то правильный способ добиться чего-то подобного или это все плохая идея с самого начала?


person Tomasz Kisiel    schedule 14.03.2021    source источник


Ответы (1)


следует использовать для изменения внешних элементов HTML, а не внутри приложения React.

Это не совсем правильно. Портал React используется, когда вы хотите отобразить элемент дерева реакций где-то за пределами дерева реакций (имеется в виду, в DOM, который не контролируется реакцией). И элементы DOM, установленные с помощью dangerouslySetInnerHTML, не контролируются React. Я думаю, что ваше решение, учитывая обстоятельства, в порядке. Вы определенно должны быть осторожны и удалять порталы, прежде чем удалять сообщение, чтобы React не пытался что-то отрендерить в null, но в остальном он должен работать.

person Mr. Hedgehog    schedule 14.03.2021