반응 형 앱에서 액티브 클래스 부트 스트랩 캐 러셀을 추가하면 반응 앱에서 첫 번째 키에만 나타납니다

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