アクティブなクラスのブートストラップカルーセルを反復データに追加すると、反応するアプリケーションの最初のキーだけが返されます

Question

私は反復アイテムカルーセルを作る方法を探しています。リターンパグ.carousel-item${activeornot}

return _.map(this.props.editor_pick_data, function (value, key){ 
    if(key == 0){ 

    } 
    return (
    pug` 
    .carousel-item.active(key=${key}, style=${{display: 'relative'}}) 
     .col-md-3.col-sm-6.col-xs-12npm 
     a.thumbnail(href="#") 
      img.img-responsive(src=${value.item.images[1].big_thumbnail}) 
    ` 
) 
}) 

Answer 1

です。私はあなたにもclassName変数を持つことができると思う：

className=${key == 0 ? 'active' : ''} 

-

renderCarouselItem() { 
    return _.map(this.props.editor_pick_data, function(value, key) { 
    return (
     pug` 
     .carousel-item(key=${key}, style=${{display: 'relative'}}, className=${key == 0 ? 'active' : ''}) 
     .col-md-3.col-sm-6.col-xs-12npm 
      a.thumbnail(href="#") 
      img.img-responsive(src=${value.item.images[1].big_thumbnail}) 
     ` 
    ); 
    }) 
} 

Answer 2

この作品で変数を使用するが、私は知らないこれはあなただけでkey === 0場合activeクラスを追加しようとしているように見えますのベストプラクティス

renderCarouselItem() { 
    return _.map(this.props.editor_pick_data, function (value, key){ 
     let html = []; 
     if(key == 0){ 
     html.push(pug` 
     .carousel-item.active(key=${key}, style=${{display: 'relative'}}) 
      .col-md-3.col-sm-6.col-xs-12npm 
      a.thumbnail(href="#") 
       img.img-responsive(src=${value.item.images[1].big_thumbnail}) 
     `) 
     }else{ 
     html.push(pug` 
     .carousel-item(key=${key}, style=${{display: 'relative'}}) 
      .col-md-3.col-sm-6.col-xs-12npm 
      a.thumbnail(href="#") 
       img.img-responsive(src=${value.item.images[1].big_thumbnail}) 
     `) 
     } 

     return (
     pug` 
      ${html[0]} 
     ` 
    ) 
    }) 
    }