Wie könnte ich kombinieren Winkel- und Reagieren in einem Projekt

Question

Ich habe eine Seite portal.html, die durch Schräg von der Strecke mit ReactJS implementieren einige UI-Komponente Interaktionen Ich möchte portal

state('portal', { 
    url: '/', 
    templateUrl: 'portal.html', 
    controller: 'portalCtrl', 
    }) 

jedoch gemacht wird.

ich versuchte

<script type="text/javascript" src="react_box/react_bundle.js"></script> 

Allerdings habe ich habe diesen Fehler react.js Skript in dem Ende des Körpers (durch webpack erzeugt) einzuhaken.

Ich glaube, das Problem liegt an der DOM ist nicht bereit, wenn reagieren wollen, um das DOM zu finden.

Wie kann ich die Reaktion beginnen zu arbeiten, nachdem das DOM von der Angular bereit ist?

Answer 1

Ich habe React-Komponenten zuvor in eine Angular-App integriert, indem ich sie in eine Direktive einpacke. Dadurch wird sichergestellt, dass der React-Code zur richtigen Zeit ausgeführt wird. (Ich denke nicht, dass Sie sicherstellen können, dass Angular "bereit" ist, indem Sie einfach das React-Zeug als script-Tag einfügen).

Die Richtlinie sieht in etwa wie folgt aus:

var React = require('react'); 
var ReactComponent = require('./react-component.jsx'); 

function ReactDirective() { 
    return { 
     restrict: 'EA', 
     scope: { 
      data: '=data' 
     }, 
     template: '<div></div>', 
     link: function(scope, element) { 
      var renderComponent = function(data) { 
       React.render(React.createElement(ReactComponent, {data: data}), element[0]); 
      }; 

      scope.$watch('data', function(newValues) { 
       renderComponent(newValues); 
      }, true); 
     } 
    }; 
} 

module.exports = ReactDirective; 

Sie dann die Richtlinie als normal sind. Wenn Sie den React-Code für die Interaktion mit dem Angular-Code benötigen, leiten Sie Callbacks als Requisiten an die React-Komponente weiter.