添加活动类引导轮播重复数据只是在第一个关键的反应应用程序

Question

我在寻找如何使重复项目轮播如果只有关键0有类操作，如果我使用它作为回报它的错误，如果我采用可变回报哈巴狗.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

它看起来像你只是想，如果key === 0添加active类。我想，你可以有一个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

这项工作，但我不知道这是最好的做法

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