1

オブジェクトの $watched 配列を変更するときのパフォーマンスを向上させるために、ngRepeat の代わりに ngReact を使用しようとしています。

反応コンポーネントが動作し、html が正しく表示されます。<button>コントローラーに含まれるマーカーごとに、marker.titleをテキストとして作成したいと思います。

ただし、非常に遅く、ngRepeat よりもはるかに遅く、コンソールには同じエラーの無限のリストが表示されます。

[Error] Deprecated attempt to access property 'nodeType' on a non-Node object.
    n (angular.min.js, line 7)
    sa (angular.min.js, line 11)
    $digest (angular.min.js, line 129)
    $apply (angular.min.js, line 132)
    l (angular.min.js, line 85)
    O (angular.min.js, line 89)
    (funzione anonima) (angular.min.js, line 90)
    m (angular.min.js, line 89)

これが私の React コンポーネントです (記事の最後に JSfiddle リンクがあります)。

HTML

<!-- ctrl is the controller, having a list of markers -->
<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 ) 
        {//for each marker, create a button
         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です。簡単な説明: - ページにマップを表示するための MapBox ディレクティブがあります。1 秒後、地図上に 3 つのマーカーをロードして、ajax リクエストをシミュレートします。- ロードされたマーカーごとに、左側のパネルにマーカーの名前を表示する役割を持つlistがプッシュされます。PanelController名前は、ng-React を使用して、React コンポーネントによって表示されます。動作しますが、システム全体を遅くするエラーがあります。 コンソールエラー

何が問題になる可能性がありますか？ありがとうございました

4

1 に答える 1

0

私の質問へのコメントのおかげで、本当の問題は Safari コンソールによって表示される非推奨のエラーではなく、再帰的な $digest サイクルに関する問題であることがわかりました。Chrome を使用すると、正しいエラーが表示されます。ただし、まだ問題を修正していないため、ここに新しい質問を投稿しました。ありがとうございました

于 2015-09-17T10:29:15.627 に答える