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

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

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

Answer 2

看起来您只是尝试添加active类key === 0。我想你也可以有一个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 3

也许您可以执行以下操作：

className={`carousel-item ${key == 0 ? 'active' : ''}`}

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

3 个答案: