Как вставить динамически html структуру?

Question

[Juniorrrrr]

Доброго времени суток.Есть структура Html тегов , она может быть разной div>script+a+p, div>script и т.д.
Как правило внутри структуры такой есть script, который внутри запускает анонимную функцию и та рисует что-то в div.

Можно ли как то менее болезненно вставить это и запустить без регулярных выражений ибо кейсов тьма будет? На проекте используется React.

Вот пример данных:

"<div class="pulse-widget" data-sid="partners_widget_horizontal_plus_one_ru"></div> <script async src="https://static.pulse.mail.ru/pulse-widget.js"></script>"

Пробовал несколько вариантов.
1) appendChild. Выдает ошибку т.к. ожидает не строку в параметре, а нод элемент.
2) insertAdjacentHTML Уже лучше, но он не отрисовывает стили, будто скрипт запускается быстрее чем монтируется див с id в который он должен рисовать.
3) document.write отрисовывает все как нужно , но здесь проблема в том что все сайд эффекты запускаются в useEffect, который запускается после рендера. А document.write если запущен после отрисовки страницы перетирает всю страницу и вставляет вместо неё содержимое.

Подскажите люди опытные как побороть можно это дело ?

Comments

[Kovalsky]

Вроде вижу в гугле достаточно результатов по запросу "react insert html"

[Yustas Alexu]

Как вы умудряетесь что-то писать на реакте, не зная самых его основ? https://ru.reactjs.org/docs/dom-elements.html#dang...

[Juniorrrrr]

Yustas Alexu, Спасибо огромное Кеп за гениальное умозаключение.Вот аналог вашего вопроса - Как вообще вы умудряетесь отвечать на вопросы такими банальными ответами ?

Для галочки этот вариант не срабатывает как нужно, работает примерно insertAdjacentHTML

[Yustas Alexu]

Juniorrrrr, это свойство не есть решение, а всего лишь отправная точка, куда надо копать.

[Kovalsky]

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

"Для галочки этот вариант не срабатывает как нужно" - если что-то работает не так как надо, то пишите по каким конкретно причинам вас не устраивает решение. Без этого непонятно какая возникла ошибка

[Juniorrrrr]

Kovalsky, мне меньше всего хочется сейчас флудить. Поэтому давайте прекратим это

[Yustas Alexu]

Juniorrrrr,

Для галочки этот вариант не срабатывает как нужно

Мы не экстрасенсы и не знаем как вам нужно. Опишите вопрос подробнее и возможно кто-то даст более развернутый ответ.

[Juniorrrrr]

Yustas Alexu, вы не экстрасенс, вы человек который осуждает, а после бросает какую-то информацию, которая и так лежит на поверхности. Задача описана максимально обширно на сколько это возможно. Максимум могу добавить скрины, которые ровным счетом ничего не изменят. Поэтому если добавить нечего, то оставим эту беседу в покое.

[Kovalsky]

Juniorrrrr, вы спросили "Как вставить динамически html структуру?", уточнили что используете такой инструмент как react, вам дали ссылку на один из применяемых в react механизмов для решения данной проблемы, на что вы сказали "не срабатывает как нужно". Решаемая вами задача настолько простая, что лично я даже предположить не могу что там может не срабатывать. Отсюда и уточняющие вопросы. Вам вряд ли кто-то сможет помочь если вы самое простое и очевидное решение отбрасываете, никак не аргументируя

[Yustas Alexu]

Juniorrrrr, а зачем вы вообще пытаетесь это вставить через React? Вы в курсе что одну и ту же страницу можно поделить на статическую часть и ту часть, которая управляется React? Это ведь опять основы.

[Yustas Alexu]

Juniorrrrr, Что мешает обрабатывать статическую часть отдельным скриптом?

[Дмитрий Pacification]

Juniorrrrr, А вообще для чего нужно именно динамически всавлять htlm? Можете описать бизнесс задачу? Может на самом деле динамически вставлять хтмл - это не тот путь, которым нужно идти? Может есть другой путь?

На крайняк, если это юзер будет писать хтмл, то может тогда сделать свой парсер хтмл, и за одно закрывать автоматически теги за ним, чтобы он верстку не поломал в другом месте?

[Дмитрий Pacification]

Juniorrrrr, а, прочитал последний коммент и стало немного яснее. А как бэк отдает данные? websocket? То есть Вы где-то там слушаете событие по websocket. И если данные прилетают в виде html дерева, то можно создать компонент, который слушал бы веб сокет, принимая данные проверял что это действительно ReactNode, и рендерил их в props.children

Answer 1

[xmoonlight]

includeHTML