Визуализировать элемент DOM в компонент React

Question

Я хотел бы спросить, есть ли способ визуализировать (переместить) элемент DOM в компонент React? Моя ситуация: у меня есть третий скрипт, внедренный в мой проект React (например, я интегрирую виджет живого чата на свой сайт с помощью скрипта). Этот скрипт создает какой-то узел DOM при запуске, я хочу обернуть этот узел DOM в свой компонент React. Как я могу этого добиться?

Я ценю любую помощь, заранее спасибо.

Например: у меня есть скрипт (чистый JS), интегрированный с LiveChat, скрипт создает элемент div внутри которого есть iframe. Затем я хочу обернуть эти элементы в свой компонент React.

Answer 1

Это было нелегко, но я думаю, что нашел решение; проверьте эту песочницу для реализации: https://codesandbox.io/s/strange-borg-qvxlc?file= / src / App. js: 162-179

Объяснение:

• в возвращаемом компоненте create элемент-контейнер для вашего скрипта
• не забудьте присвоить этому элементу идентификатор
• вы также можете дать этому элементу ссылку через useRef или React.createRef ()
• это может помочь получить доступ к виджету в зависимости от вашего использования
• в useEffect или componentDidMount создать строковый скрипт
• в этом примере я ищу cdn jQuery
• , если скрипт имеет тело, вам может потребоваться добавить его к атрибуту onload
• в этом случае, я успешно использую скрипт для добавления события jquery click
• добавить пост-подписку как зависимость и импортировать к компоненту
• вызов postscribe с использованием идентификатора контейнера и сценария в качестве аргументов
• вы можете удалить сценарий при отключении в возврате useEffect или componentWillUnmount