Обновите приложение React динамически с помощью JavaScript

Question

Приложение My React выполняет сторонний сервисный вызов для загрузки содержимого, которое необходимо вставить в DOM с помощью указанного селектора CSS. Это может быть где угодно на странице. Как именно я могу внедрить этот контент в приложение React указанным селектором, чтобы убедиться, что Virtual DOM обновляется и остается неизменным?

Imaging, это сторонний объект ответа, который я хочу внедрить в приложение React:

var response={selector:'#someSel',html='<div>Hello from third party</div>'}

Я немного новичок в мире React, но знаком с проблемами Virtual DOM при динамическом обновлении приложения. Я хочу, чтобы React обновлял интерфейс, чтобы внедрить этот контент - когда в приложении React все компоненты уже обновлены.

Обратите внимание, что я могу изменить приложение, однако мне нужно, чтобы оно заработало.

Answer 1

Я думаю dangerouslySetInnerHTML может быть то, что вы ищете.

Официальные документы React используют следующий пример.

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Конечно, в вашем случае вы бы настроили __html в createMarkup() с содержанием HTML от вашего третьего лица.