가 어떻게 하나 개의 프로젝트

Question

에 내가 경로 그러나 portal

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

에 의해 각도에 의해 렌더링 된 페이지 portal.html이 각도 결합 반작용 수, 나는 ReactJS에 구현하려는 일부 UI 구성 요소의 상호 작용.

나는

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

그러나, 나는이 오류가 발생했습니다 (웹팩에 의해 생성) 신체의 끝에서 react.js 스크립트를 후크하려고 노력했다.

invariant.js:38Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element. 

나는이 문제는 DOM이 반응을 찾을 때 준비가되지 않았기 때문에 발생한다고 생각합니다.

각도로 DOM을 준비한 후에 반응 시작을 어떻게 만들 수 있습니까?

Answer 1

지시어로 감싸기 전에 React 구성 요소를 Angular app에 통합했습니다. 이것은 반응 코드가 적시에 실행되도록합니다. (나는 Angular가 단순히 React 항목을 script 태그로 포함시킴으로써 "준비"되어 있다고 확신 할 수 없다고 생각합니다.)

이 지침은 다음과 같은 :

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; 

그런 다음 정상으로 지시자를 포함한다. React 코드가 Angular 코드와 상호 작용할 필요가 있다면, 콜백을 React 구성 요소에 소품으로 전달하십시오.