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

Question

我正在寻找如何制作一个重复项目轮播，如果我使用它作为返回它的错误并且如果我使用变量作为返回 pug.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={`carousel-item ${key == 0 ? 'active' : ''}`}

Answer 2

看起来您只是想添加active类 if 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

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

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