how to make ngReact work with ng-directives (ngClick, ngStyle, etc.)

Question

[UPDATE July 23 2015] I want to create a list of buttons, one for each marker in ctrl.getMarkers(). Let's assume a marker is something like marker: {'title':' '}.

Using the classic ng-repeat, I have the following

<div ng-repeat="marker in ctrl.getMarkers()" >
        <button class="btn btn-default" 
                ng-click = "doSomething(marker)"
                ng-style="ctrl.isRed() ? {color:red} : {color:black}">
              <b> {{::marker.title}}</b>                                                                                                                            
        </button>   
</div>

I have about 100 buttons to show, but the update is not fast at all. So I want to try the ng-react library. Unfortunately I haven't well understood how to use it.

So far, I wrote this:

HTML

<poi-list list="ctrl.getMarkers()" />

JS

 /** @jsx React.DOM */
 .value( "PoiList", React.createClass( {

  propTypes : {

    list: React.PropTypes.object.isRequired
  },

  getDefaultProps: function() {
    return { list: [] };
  },

  render: function() 
   {
    var markers = this.props.list.map( function( marker, i ) 
        {
         return React.DOM.button({className:'btn btn-default'
                                  /*ng-click? ng-class?*/
                                 }, marker.title) ;
        } );
    return React.DOM.div(null, markers);
    }
}))

.directive( 'poiList', function( reactDirective ) {
  return reactDirective( 'PoiList' );
} );

How could I use ng-click, ng-class etc with the React DOM element?

Here's the JSFiddle

[UPDATE 2]

I found a solution and I've answered my own question below. However I've got still a problem slowing down react: "Deprecated attempt to access property 'nodeType' on a non-Node object". Please, look at my answer below for further info about the error. Thank you

If you want speed you'd be better off making a root component which renders the buttons and pass an array and then iterate in react rather than iterating in angular. And this way you bypass your problem entirely because you just include one component as far as angular is concerned. — Mike Driver, Jul 20 '15 at 18:35
could you please give me further information on how to do that? I've been using Angular for a while, but it's t the first interaction with React. Is my attempt totally wrong? I am using a single component 'PoiList' that should contain the list of buttons. — DeLac, Jul 22 '15 at 07:58

score 1 · Accepted Answer · edited May 23 '17 at 11:52

I figured out how to (almost) solve my problem. I pass the controller as attribute of the react element, so I can invoke its functions. Like this:

HTML

<poi-list list="ctrl.getMarkers()" ctrl="ctrl"/>

JS

 .value( "PoiList", React.createClass( {

  propTypes : {

    list: React.PropTypes.object.isRequired,
    ctrl: React.PropTypes.object.isRequired
  },

  render: function() 
   {
    var ctrl = this.props.ctrl; // directive's Controller

    var markers = this.props.list.map( function( marker, i ) 
        {
         return React.DOM.button(  {
                                    className:'btn btn-default',
                                    onClick: function(){ctrl.doSomething(marker);},
                                    onMouseOver: function(){ctrl.doSomethingElse(marker);},                               
                                   }, marker.title
                                 ) ; 
        } );
    return React.DOM.div(null, markers);
    }


}))

.directive( 'poiList', function( reactDirective ) {
  return reactDirective( 'PoiList' );
} );

It works!! JSFiddle

[UPDATE 1]

Anyway.... in my real application it's terrible slow... much slower then ng-repeat. I don't know why. Looking at the console, I have a bunch of error "Deprecated attempt to access property 'nodeType' on a non-Node object" from angular.js:328, and I guess this is the reason of the slow performance. I don't know what's the problem, and I don't have this error in the JSFiddle... any help?

This is the piece of Angular code that rises the error:

    function forEach(obj, iterator, context) {
      var key, length;
      if (obj) {
        if (isFunction(obj)) {
          for (key in obj) {
            // Need to check if hasOwnProperty exists,
            // as on IE8 the result of querySelectorAll is an object without a hasOwnProperty function
            if (key != 'prototype' && key != 'length' && key != 'name' && (!obj.hasOwnProperty || obj.hasOwnProperty(key))) {
              iterator.call(context, obj[key], key, obj);
            }
          }
/*---->*/  } else if (isArray(obj) || isArrayLike(obj)) {// <---ERR
          var isPrimitive = typeof obj !== 'object';
          for (key = 0, length = obj.length; key < length; key++) {
            if (isPrimitive || key in obj) {
              iterator.call(context, obj[key], key, obj);
            }
          }
        } else if (obj.forEach && obj.forEach !== forEach) {
            obj.forEach(iterator, context, obj);
        } else {
          for (key in obj) {
            if (obj.hasOwnProperty(key)) {
              iterator.call(context, obj[key], key, obj);
            }
          }
        }
      }
      return obj;
    }

[UPDATE 2]

I figured out that the problem was the array of complex objects passed to the React Element. It's impossible for React making comparison between old and new object, resulting in slowness and errors. This is the explanation of this problem and the solution.

how to make ngReact work with ng-directives (ngClick, ngStyle, etc.)

1 Answers1