我如何将 React 组件与 Angular 混合答案

【问题标题】：How i can mixed React component to Angular我如何将 React 组件与 Angular 混合
【发布时间】：2018-04-18 07:56:42
【问题描述】：

各位同事，我再次询问，但我会尝试重新表述。我有一个需要嵌入到 Angular 应用程序中的 React 组件。 jsx 文件被导入，并通过 ReactDOM.render 将该文件渲染到其中一个块中。但问题是angular-cli 不能导入jsx 文件。只是我想使用angular-cli 构建角度应用程序。

我可以构建它以便我不必导入 jsx 文件和 css 文件吗？

【问题讨论】：

参考这个链接，你可能需要stackoverflow.com/questions/45840096/…
这个链接有一个复杂的解决方案：stackoverflow.com/questions/54408694/…

标签： angular reactjs webpack gulp

【解决方案1】：

为 AngularJS 使用 ngReact 库：对于 Angular，我认为还没有解决方案。

【讨论】：

您可以轻松组合 Angular 和 React - 这不是问题，而且您不需要任何特殊库。
@kris_IV 你能详细说明一下吗？
@catch22 当我调查此问题时，我在 StackOverflow 上创建了一个关于此主题的完整答案：stackoverflow.com/a/54408718/2972087 在此答案中，您可以查找演示和 GitHub 存储库。给我一个反馈，也许我可以澄清更多细节。
@kris_IV 了不起的工作！感谢您如此清楚地解释这一点。当你有机会时，你应该用它制作一个模块；）
@catch22 这个我有想过，但是我觉得这个实现就是你理解的时候，一般你真正想用的时候应该是灵活的。我不知道如何创建一个足够灵活的模块，所以我创建了这个答案、演示和 GitHub 存储库来分享这个解决方案。

【解决方案2】：

最好的方法是通过编译器（例如 babel）捆绑您的组件并将其导入您的 Angular 应用程序中。

然后，正如 ForestG 所说，您可以使用 ngReact 将您的 React 组件包装到一个指令中并在您的 Angular 应用程序中使用它。

【讨论】：