ReactJS -根DOM节点动态添加

Question

我在遗留应用程序中有一个由jquery控制的选项卡式接口。

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

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

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

如果只在第一次激活选项卡时加载脚本，它就无法在第二个选项卡激活之前将组件添加到DOM中。

如何处理动态插入的根DOM节点(v16.2)？

请帮帮我！

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

谢谢