在 React 应用程序的第一个键上的重复数据处添加活动 class bootstrap 轮播

Question

我正在寻找如何制作一个重复项目轮播，如果我在 return 中使用它，如果只有键 0 有 class 操作，它是错误的，如果我在 return哈巴狗.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 class 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

也许你可以这样做：

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

在 React 应用程序的第一个键上的重复数据处添加活动 class bootstrap 轮播

adding active class bootstrap carousel at repeat data just on first key in react app

reactjs

bootstrap-carousel

bootstrap-4