CODEWITHSUNDEEP
angularjsreactjs
newBike
newBike

Reputation: 14992

How could I combine Angular and React in one project

I have a page portal.html which is rendered by Angular by the route portal

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

However, some UI component interactions I want to implement with ReactJS.

I tried to hook react.js script in the end of body (generated by webpack)

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

However, I got this error.

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

I belive the problem is due to the DOM is not ready when react want to find the DOM.

How can I make the react start working after the DOM is ready by the Angular?

Upvotes: 3

Views: 5847

Answers (1)

Matt Holland
Matt Holland

Reputation: 2210

I have integrated React components into an Angular app before by wrapping them in a directive. This ensures that the React code is executed at the right time. (I don't think you can ensure that Angular is "ready" by simply including the React stuff as a script tag).

The directive looks something like this:

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;

You then include the directive as normal. If you need the React code to interact with the Angular code, pass in callbacks as props to the React component.

Upvotes: 2

Related Questions