在 reactJS 中使用引导轮播的当前幻灯片数量

Question

我正在 reactJS 中创建一个引导轮播（图片库），但我在显示准确的索引号时遇到了问题（它显示了当前幻灯片的最后一个索引值。

例如：如果我在来自第 1-2-3 张幻灯片的第 4 张幻灯片上，那么我的幻灯片编号将为 3（即索引 2），我将单击上一个按钮，那么我当前的幻灯片编号将是 3rd 但 myIndex 值将是 4（而不是 3）或图像索引将是 3 而不是 2）活动幻灯片。

var PhotoAlbum= React.createClass({
getInitialState: function(){
        return({
            myIndex : 1
        })
    },


    componentWillReceiveProps: function() {
        var currentIndex = $('div.active').index() + 1;
        console.log(currentIndex)

    this.setState({ myIndex:  currentIndex })
},


   render: function(){

console.log(this.state.myIndex, "index number");
    return(
        <div>

        <div className="modal-body pd_0">
       <h4 className="text-center"><b>{this.state.myIndex}/{Photos.length}</b></h4>
        <div id="carousel-example-generic" className="carousel slide" data-ride="carousel">

<div className="carousel-inner" role="listbox" >
    {
        Photos.map(function(x,i){
             if(i==0){
                return(
                 <div className="item active">
                 <img src={x} className="img-responsive"/>
                 </div>
                )

            }else{
                return(
                 <div className="item">
                 <img src={x} className="img-responsive"/>
                 </div>
                )

            }
        })
    }
    </div>

  <a className="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">
    <span className="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span className="sr-only">Previous</span>
  </a>
  <a className="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">
    <span className="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span className="sr-only">Next</span>
  </a>
</div>
      </div>


        </div>
        )
   }
})

在给定的示例中，我在 componentDidMount 中尝试了相同的操作，但 this.setState 不是那里的功能。 请在此处帮助我获取正确的幻灯片编号并在我的浏览器上进行更新。 谢谢

Answer 1

对于给定的代码，我根据需要创建了您的模式。请查看给定的示例：

var PhotoAlbumModal= React.createClass({
   getInitialState: function(){
        return ({
          myPhotoAlbum: this.props.photoAlbum,
          myIndex: 1
        })
    },
     componentWillReceiveProps: function(newProps) {
    this.setState({ myPhotoAlbum:  newProps.photoAlbum })
    },

    componentDidMount: function() {
        this.albumController();
    },

    albumController: function(){
              $('.carousel').carousel({ })
              .on('slid.bs.carousel', function () {

                  var curSlide = $('div.item.active');
                   myIndexValue= curSlide.index()+1;
                   this.setState({ myIndex: myIndexValue })
              }.bind(this));

    },

    render: function(){

            var itemClass;
            var myAlbum = Object.keys(this.state.myPhotoAlbum).map(function(x,i){
                var image=x

                if(i == 0){
                  itemClass="item active";
                  }
                  else{
                       itemClass="item";
                    }
                return(
                    <div className={itemClass} key={i}>
                        <img src={image} className="img-responsive"/>
                    </div>
                )

          },this)


    return(
        <div>
          <div className="modal-body pd_0">
              <h4 className="text-center photo_album_count">{this.state.myIndex}/
              {this.state.myPhotoAlbum.length}</h4>

                  <div id="carousel-example-generic" className="carousel slide" data-interval="false">
                      <div className="carousel-inner center-album" role="listbox">
                          {myAlbum}
                      </div>

                       {this.state.myPhotoAlbum.length>1 ?
                      <div>
                          <a className="left carousel-control control-album" href="#carousel-example-generic" 
                        role="button" data-slide="prev" >
                            <div className="arrow-control">
                              <span className="album-prev" aria-hidden="true"></span>
                              <span className="sr-only">Previous</span>
                            </div>
                          </a>


                          <a className="right carousel-control control-album" href="#carousel-example-generic" 
                              role="button" data-slide="next" >
                              <div className="arrow-control">
                                <span className="album-next" aria-hidden="true"></span>
                                <span className="sr-only">Next</span>
                              </div>
                          </a>
                      </div>
                      :null}


                  </div>

          </div>
      </div>
        )
   }
});

**给定代码的好处：**如果图像总数为 1，则将没有左右控件，否则将有。

albumcontroller 函数正在处理didmount。