2015-05-10 15 views
61

Bir menü bileşeni yazarak Reactjs ile çalışıyorum."this", harita işlevinin içinde tanımlanmamıştır Reactjs

"use strict"; 

var React = require("react"); 
var Menus = React.createClass({ 

    item_url: function (item,categories,articles) { 
     console.log('afdasfasfasdfasdf'); 
     var url='XXX'; 
     if (item.type == 1) { 
      url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', {slug: categories[item.categoryId].slug}); 
     } else if (item.type == 2) { 
      url = item.articleId == null ? 'javascript:void(0)' : path('buex_portal_view_article', {slug: articles[item.articleId].slug, id: item.articleId}); 
     } else { 
      url = item.url; 
     } 
     return url; 
    }, 

    render: function() { 
    // console.log(this.props.menus); // return correctly 
      var menuElements = this.props.menus.map(function (item1) { // return fault : 'cannot read property 'props' of undefined ' 
      return (
       <div> 
        <li> 
         <a href={this.item_url(item1, this.props.categories, this.props.articles)}>{item1.name} // the same fault above 
          <i class="glyphicon glyphicon-chevron-right pull-right"></i> 
         </a> 
         <div class="sub-menu"> 
          <div> 
          {item1._children.map(function (item2) { 
           return (
            <div> 
             <h4> 
              <a href={this.item_url(item2, this.props.categories, this.props.articles)}>{ item2.name }</a> 
             </h4> 
             <ul> 
              {item2._children.map(function (item3) { 
               return ( 
                <div><li><a href={this.item_url(item3, this.props.categories, this.props.articles) }>{ item3.name }</a></li></div> 
               ); 
              })}     
             </ul> 
            </div> 
           ); 
          })} 
          </div> 
         </div> 
        </li> 
       </div> 
      ); 
     }); 

     return (
      <div class="menu"> 
       <ul class="nav nav-tabs nav-stacked"> 
        {menuElements} 
       </ul> 
      </div> 
     ); 
    } 
}); 

'Bu' harita işlevini her kullandığımda, tanımlanmamıştır, ancak bunun dışında bir sorun yoktur.

hatası:

"Cannot read property 'props' of undefined"

Herkes bana yardım et! :, Kullanabilirsiniz Alternatif olarak, ES6

someList.map(function(item) { 
    ... 
}, this) 

: ((

+0

olası yinelenen: // stackoverf arrow function otomatik olarak geçerli this bağlamı korumak için low.com/questions/20279484/how-to-access-the-correct-this-context-inside-a-callback) – WiredPrairie

+0

o olduğunu. Teşekkür ederim ! – iamhuy

cevap

189

Array.prototype.map()this eşleştirme işlevi ne ifade eder ayarlamak, bu nedenle mevcut bağlam korumak için ikinci değişken olarak this geçmek için, ikinci bir bağımsız değişken alır

someList.map((item) => { 
    ... 
}) 
[bir geri içine doğru \ `Bu \`/bağlamı nasıl erişilir?] (http
+5

Bir erkeksiniz;) –

+0

, bunun ikinci argümanını geçtiğinizde, bunun global nesneyi yeniden tanımladığı anlamına gelir mi ve eğer evetse, neden böyle? –

+0

teşekkürler @Jonny bana çaba saatlerce kurtardı :) –