如何使ngReact与ng指令(ngClick、ngStyle等)一起工作

Question

2015年7月23日更新，我想要创建一个按钮列表，每个marker在ctrl.getMarkers()。让我们假设一个标记类似于marker: {'title':' '}。

使用经典的ng-重复，我有以下内容

<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>

我有大约100个按钮显示，但更新是不快的。所以我想试试吴-反应库。不幸的是，我还没有很好地理解如何使用它。

到目前为止，我写了这个：

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' );
} );

如何在React元素中使用ng-click、ng-class等？

这是JSFiddle

更新2

我找到了一个解决方案，我在下面回答了我自己的问题。然而，我仍然遇到了一个问题:慢下来的反应：“不赞成访问非节点对象上的属性'nodeType‘”。请看我下面的答案，以获得关于错误的进一步信息。谢谢

Answer 1

我想出了如何(几乎)解决我的问题。我将控制器作为react元素的属性传递，因此我可以调用它的函数。如下所示：

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' );
} );

这很管用！！JSFiddle

更新1

总之..。在我真正的应用程序中，慢得可怕的.比纳克-重复慢多了。我也不知道原因。在控制台上，我看到了一堆来自angular.js:328的错误angular.js:328，我想这就是性能缓慢的原因。我不知道是什么问题，我没有这个错误在JSFiddle.有什么帮助吗？

这是一个产生错误的角码：

    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;
    }

更新2

我发现问题在于传递给React元素的复杂对象数组。在新旧物体之间进行比较是不可能的，结果是缓慢和错误的。这就是对这个问题的解释和解决办法。