Question

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

我已经创建了一个React App，但是一切都变了，现在我想围绕该App创建一个仪表板。问题是我希望两个App都能独立运行，因此我可以在独立的存储库中的App 1和独立的存储库中的App 2上工作。但对于部署，仅部署1个在其他应用程序中加载的应用程序。

所以我想要的情况如下

App 1仪表板将App 2作为组件加载，但仍然可以将prop从App 1传递到App2。（身份验证将在App 1中进行，并且两个应用都与同一个后端Rest api通信）

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

Answer 1

是的，有可能。有多种资源可用于执行相同操作。我建议阅读以下文章，以帮助您找到可能的解决方案。

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

https://micro-frontends.org/

Answer 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的元素。

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

2 个答案: