javascript - 使用 JavaScript 动态更新 React App

Question

我的 React 应用程序调用第三方服务来加载需要通过指定的 CSS 选择器注入 DOM 的内容。它可以在页面上的任何位置。我怎样才能通过指定的选择器将此内容注入 React 应用程序以确保 Virtual DOM 得到更新并保持不变？

成像，这是我想注入 React 应用程序的第三方响应对象：

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

我对 React 世界有些陌生，但我熟悉动态更新应用程序时的虚拟 DOM 挑战。我希望 React 在前端进行更新以注入此内容 - 当 React 应用程序的所有组件都已更新时。

请注意，我可以修改应用程序，但我需要让它工作。

Answer 1

我想dangerouslySetInnerHTML可能是你正在寻找的。

官方 React 文档使用以下示例。

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

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

当然，在您的情况下，您将使用来自第三方的 HTML 内容__html。createMarkup()