Question

[2015年7月23日更新] 我想为marker中的每个ctrl.getMarkers()创建一个按钮列表。让我们假设一个标记是类似的 marker: {'title':' '}。

使用经典 ng-repeat ，我有以下

<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个按钮要显示，但更新速度并不快。所以我想试试ng-react库。不幸的是，我还没有完全理解如何使用它。

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

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

我如何将ng-click，ng-class等用于React DOM元素？

这里是JSFiddle

[更新2]

我找到了解决方案，我已在下面回答了我自己的问题。但是，我仍然有一个问题，放慢反应：＆＃34;弃用尝试访问属性＆＃39; nodeType＆＃39;在非Node对象＆＃34;。请查看下面的答案，了解有关错误的更多信息。谢谢

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]

无论如何....在我的实际应用中它的可怕缓慢 ......比ng-repeat慢得多。我不知道为什么。看一下控制台，我有一堆来自angular.js的错误"Deprecated attempt to access property 'nodeType' on a non-Node object"：328，我猜这是性能缓慢的原因。我不知道问题是什么，我在JSFiddle中没有这个错误......任何帮助？

这是导致错误的Angular代码：

    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 Element的复杂对象数组。 React在旧对象和新对象之间进行比较是不可能的，导致缓慢和错误。 This is the explanation of this problem and the solution.

如何使ngReact与ng-directives一起使用（ngClick，ngStyle等）

1 个答案: