2017-06-19 85 views
1

我有一個現有Angularjs應用程序,我想開始使用Reactjs。需要怎樣做才能使用ngReact從Anguarjs 1調用第三方Reactjs組件?

我試過ngReact,我可以創建使用React.createClass和reactDirective我自己Reactjs組件和角度能夠調用這個指令成功。我只使用鮑爾來添加角度,反應和ngReact的依賴關係,我沒有使用任何其他工具,如吞嚥,咕嚕,webpack等。

我想使用Reactjs的主要原因是調用第三這是使用Reactjs創建的第三方Reactjs組件,不是使用ngReact創建的。我找不到這樣做的例子。我需要做什麼做的,使角應用找到Reactjs組件並調用它?

回答

0

我angularjs 1.4的應用程序也沒有使用像的WebPack常見的UI構建工具。我想介紹一些反應組件,這是我的方法。

我創建了一個文件,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反應組件和我的angularModuleOfReactComponents.js轉換爲CommonJS,然後使用browserify轉換爲瀏覽器可以理解的內容。 (儘管我使用了構建工具,但它們並不涉及我的角度應用程序,而且,這不是我的永久機制,這是一個兩步過程,不允許在更改源代碼時自動重新編譯。爲概念驗證工作,我會盡快改進這一過程。)

在我的角度應用程序,我加載角的庫文件,隨即反應過來庫,然後NG-反應過來,然後我browserified angularModuleOfReactComponents.js然後我的應用程序的角碼(控制器,指令,服務等)。

要使用的反應組分,我聲明的依賴性上「反應」(由NG-反應)和「reactComponentsModule」:

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

然後我可以注入取其成分(S)我需要:

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

在HTML中,NG-反應的反應組分指令使用,如:

<react-component name="reactMyComponent" props="myprops" watch-depth="reference" />