1

我有一个现有的 Angularjs 应用程序，我想开始使用 Reactjs。

我尝试了 ngReact，我可以使用 React.createClass 和 reactDirective 创建自己的 Reactjs 组件，并且 Angular 能够成功调用该指令。我只使用 bower 为 angular、react 和 ngReact 添加依赖项，我没有使用任何其他工具，如 gulp、grunt、webpack 等。

我想使用 Reactjs 的主要原因是调用第三方 Reactjs 组件，这些组件是使用 Reactjs 创建的，而不是使用 ngReact 创建的。我找不到这样做的例子。我需要做什么才能让 Angular 应用程序找到 Reactjs 组件并调用它？

4

2 回答 2

0

要添加@user3141592 答案，我最近发表了一篇关于如何使用 webpack 和 ngReact 将 Angular 应用程序迁移到 React 的博文：

https://www.devpanda.me/2018/02/16/Simple-Angular-and-React-Hybrid-App/

我也发布了一个 github repo：

https://github.com/danielcondemarin/angular-react-hybrid

于 2018-02-16T21:32:02.970 回答
0

我的 angularjs 1.4 应用程序也没有使用 webpack 等常见的 UI 构建工具。我想介绍一些 React 组件，这就是我的方法。

我创建了一个文件 angularModuleOfReactComponents.js。它导入反应组件，然后制作一个角度模块（reactComponentsModule）来保存它们：

import MyComponent from './MyComponent.js';
import AnotherComponent from './AnotherComponent.js';

(function(){
    var m = angular.module('reactComponentsModule', []);
    m.value('reactMyComponent', MyComponent);
    m.value('reactAnotherComponent', AnotherComponent);
})();

您应该能够通过导入第三方库来做类似的事情。您还可以编写一个使用第三方库的反应类并导入您的包装类。

然后我使用 Babel 将我的 jsx react 组件和 angularModuleOfReactComponents.js 转换为 CommonJS，然后我使用 browserify 转换为浏览器可以理解的内容。（虽然我使用了构建工具，但它们不涉及我的 Angular 应用程序。而且，这不是我的永久机制。这是一个两步过程，当源更改时不允许自动重新编译。我只是想得到一些东西为概念验证工作，我将很快改进这个过程。）

在我的角度应用程序中，我加载角度库文件，然后是反应库，然后是 ng-react，然后是浏览器化的 angularModuleOfReactComponents.js，然后是我的应用程序的角度代码（控制器、指令、服务等）。

要使用反应组件，我声明了对“反应”（来自 ng-react）和“反应组件模块”的依赖：

var myModule = angular.module('myModule', ['react', 'reactComponentsModule']);

然后我可以注入我需要的任何组件：

myModule.controller('myController', ['$scope', '$log', 'reactMyComponent', function($scope, $log, reactMyComponent) {
$scope.myprops = {name:'Jack'};
}]);

在 html 中，ng-react 的 react-component 指令使用如下：

<react-component name="reactMyComponent" props="myprops" watch-depth="reference" />
于 2018-02-16T19:24:15.403 回答