ReactJS - 动态添加的根 DOM 节点

Question

我有一个选项卡式界面，由遗留应用程序中的jquery控制。

我正在将新部件迁移到 ReactJS。

其中一个选项卡包含我希望我的组件出现的 React 根 DOM 节点。当选项卡被激活时，DOM 节点以及选项卡中的所有内容将通过 jquery AJAX 加载 html(( 函数。在这种情况下，React 无法找到 DOM 节点并失败并显示错误。

如果我在选项卡激活时使用 AJAX 动态加载 React 脚本，则每次加载脚本时，它都会不断添加重复的根组件。

如果我仅在第一次激活选项卡时加载脚本，则在第二个选项卡激活后，它无法将组件完全添加到 DOM。

如何在 React (v16.2( 中使用动态插入的根 DOM 节点？

请帮忙！

Answer 1

我找到了解决方案。

只需将其写入您的主组件文件中，即可从外部源(如 jQuery(控制 react 组件：

function renderComponent() {
  ReactDOM.render(<YourApp />, document.getElementById('your-root-node'));
}
window.initReact = renderComponent;
function unmountComponent() {
  ReactDOM.unmountComponentAtNode(document.getElementById('your-root-node'));
}
window.unmountReact = unmountComponent;

然后在知道根节点已添加到 DOM 时，在 jQuery 代码中像这样调用它：

initReact();

当您要从 DOM 中删除根节点时调用此节点(建议清理状态/任何事件处理程序(：

unmountReact();

灵感来源：https://medium.com/@michaelbrazell/invoking-reactdom-render-from-outside-of-react-86c3a3350bd7

谢谢