Hinzufügen von aktiven Klasse Bootstrap Karussell bei Wiederholungsdaten nur auf den ersten Schlüssel in reagieren app

Question

Ich schaue, wie man ein Wiederholungselement Karussell, die nur Schlüssel 0, die Klassenaktion haben, wenn ich es im Gegenzug verwenden, es ist Fehler und wenn ich Verwendung variabler im Gegenzug Mops .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

Es sieht aus wie du bist nur active Klasse, wenn key === 0 hinzufügen möchten. Ich glaube, Sie auch eine className Variable haben:

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

diese Arbeit, aber ich weiß nicht, das ist die beste Praxis

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]} 
     ` 
    ) 
    }) 
    }