是否可以将 React App 加载到另一个 React App 中？答案

【问题标题】：Is it possible to load a React App into another React App?是否可以将 React App 加载到另一个 React App 中？
【发布时间】：2018-11-16 19:49:16
【问题描述】：

是否可以将 React 应用程序加载到另一个 React 应用程序中？

我创建了一个 React 应用程序，但情况发生了变化，现在我想围绕该应用程序创建一个仪表板。问题是我希望两个应用程序能够分开运行，这样我就可以在单独的存储库中处理应用程序 1，在单独的存储库中处理应用程序 2。但是对于部署，仅部署 1 个加载到另一个应用程序中的应用程序。

所以我想要的情况如下

App 1 Dashboard 将 App 2 作为组件加载，同时仍然可以将 props 从 App 1 传递到 App 2。（身份验证将在 App 1 中进行，并且两个应用程序都与同一个后端 rest api 通信）

我已经看到了 Iframe 和重定向等解决方案，但这不是我想要的，除非没有其他方法。

【问题讨论】：

使用 iframe 将另一个 Web 应用加载到您的应用中

标签： reactjs

【解决方案1】：

是的，这是可能的。有各种资源可以做同样的事情。我建议您阅读以下文章，这些文章将帮助您找到可能的解决方案。

https://medium.com/@tomsoderlund/micro-frontends-a-microservice-approach-to-front-end-web-development-f325ebdadc16

https://micro-frontends.org/

【讨论】：

【解决方案2】：

这是我的方法：

APP1应该是这个

<!doctype html>
<html lang="en">
<head>
    <!-- Your header contents -->
</head>
<body>

<div id="content"></div>

<script>
    window.addEventListener('someComponentInitialized', () => {
        SomeComponent(
            {someConfig: 'someValue'}, 
            document.getElementById('content')
        );
    });
</script>

<script type="text/javascript" src="https://domain-where-app2-lives.ext/bundle.js"></script>
</body>
</html>

APP2应该是这个（App 1中调用bundle.js）

import SomeComponent from './components/someComponent';
import React from 'react';
import ReactDOM from 'react-dom';

const SomeComponent = (config, element) => {
    ReactDOM.render(<SomeComponent config={config} />,
        element
    );
};

window.SomeComponent = SomeComponent;
window.dispatchEvent(new Event('someComponentInitialized'));

这是做什么的：

App2 正在将 SomeComponent 方法添加到全局窗口范围。在 App1 中，您调用该方法并传递参数，参数 1 是配置，参数 2 是您希望打印 SomeComponent 的元素。

【讨论】：