如何使ngReact使用ng指令（ngClick，ngStyle等）

[UPDATE 2015年7月23日] 我想創建一個按鈕列表，每個在ctrl.getMarkers()之一。我們假設一個標記是類似 marker: {'title':' '}。如何使ngReact使用ng指令（ngClick，ngStyle等）

採用了經典的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按鈕來顯示，但更新並不快的。所以我想試試ng-react庫。不幸的是我沒有很好地理解如何使用它。

到目前爲止，我寫了這個：

HTML

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

/** @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等與陣營DOM元素？

這裏的JSFiddle

[更新2]

我找到了解決辦法，我已經回答了下面我自己的問題。但是，我仍然遇到了一個緩慢的反應問題：「不推薦嘗試訪問非節點對象上的屬性'nodeType'」。請查看下面的答案以獲得有關錯誤的更多信息。謝謝

來源

2015-07-20 DeLac

如果你想要速度，你最好做一個根組件，它渲染按鈕並傳遞一個數組，然後迭代而不是迭代。這樣，你完全繞過你的問題，因爲你只要包含一個組件就角度而言。 –

可否請你給我進一步的信息如何做到這一點？我一直在使用Angular，但這是與React的第一次交互。我的嘗試是完全錯誤的嗎？我正在使用包含按鈕列表的單個組件'PoiList'。 – DeLac

我已更新我的問題。 – DeLac

我想出瞭如何（幾乎）解決我的問題。我將控制器作爲react元素的屬性傳遞，所以我可以調用它的函數。就像這樣：

HTML

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

.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-重複慢得多。我不知道爲什麼。看看控制檯，我有一堆來自angular.js：328的錯誤"Deprecated attempt to access property 'nodeType' on a non-Node object"，我想這是性能下降的原因。我不知道是什麼問題，並且我沒有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; 
    }

[UPDATE 2]

我想出這個問題是傳遞給陣營元素複雜對象的數組。 React對新舊對象進行比較是不可能的，導致緩慢和錯誤。This is the explanation of this problem and the solution.

來源

2015-07-23 16:32:10 DeLac

如何使ngReact使用ng指令（ngClick，ngStyle等）

回答

相關問題