将使用 create-react-app 创建的 React 应用程序集成到外部应用程序中答案

【问题标题】：Integrate React app created with create-react-app into an external application将使用 create-react-app 创建的 React 应用程序集成到外部应用程序中
【发布时间】：2018-07-14 15:28:24
【问题描述】：

我正在使用create-react-app-typescript 创建一个反应应用程序。我要做的是 build 应用程序，然后将生成的 js 和 CSS 文件包含到另一个应用程序中（这是一个非常古老的应用程序，对 React 或任何新的 JavaScript 功能一无所知)

我的问题：我希望能够将信息传递给我的 React 应用程序；例如，我想指定一个用于显示信息的数组，但问题是只要我在 React 的js 文件中添加一个<script> 标签，它就会尝试在目标@987654327 下创建应用程序@元素。

不确定这是否是个好主意，但我尽量避免eject我的 React 应用程序，这样我就不需要自己维护所有东西。

我想到的一个解决方案是在 localStorage 中创建一个项目，然后从我的 React 应用程序中读取它，这以某种方式解决了问题，但这是一个好方法吗？

然后还有另一个问题：我希望能够从外部应用程序传递一个回调，以便从我的 React 应用程序调用，从而在我的外部应用程序中发生某些事情，而这不能使用 localStorage 来完成

非常感谢任何帮助或提示，谢谢

【问题讨论】：

我认为您可能会混淆“应用程序”和“组件”的概念，这是完全合理的，因为反应很好地模糊了这条线。而不是从您的 create-react-app 项目中提取“应用程序”，而是将 App 组件公开给您的其他应用程序。然后你可以调用ReactDOM.render 并将你想要的任何东西作为道具（回调、数组等）传递给你的应用组件
您能否详细说明如何将App 组件暴露给外部？

标签： javascript reactjs typescript create-react-app

【解决方案1】：

您根本不必退出项目。一种可能的解决方案（也许不是最好的）只是更改您的index.js 以公开您的应用程序。因此，与其直接“渲染”应用程序，不如执行以下操作

// needed imports

window.startFromOutside = function(element, callback) {
  ReactDOM.render(<ReactApp cb={callback} />, element)
}

这样你可以从外部引导你的反应应用程序，传递你想要的任何属性。

【讨论】：