reactjs 中运用swiper 插件时 点击事件失效问题

在reactjs 中运用swiper 相关的插件（包括swiper.js,react-swiper,以及react-id-swiper）会出现点击事件失效的问题，那么问题出现在哪里呢？

先上正常的逻辑代码

return (      <Swiper        {...params}      >        {that.props.bannerData.map((item,index) => {              return (                    <img  src={item.imgurl} onClick={e=>this.clickFunc(e} key={index}/>                )        })}      </Swiper>    )

正常情况下会这样写，而且页面的渲染，以及点击貌似没有问题，但是当我们在第一屏反向滑动时候点击发现页面跳转的逻辑没有执行？这是为什么呢？

经过仔细查看发现  原来swiper的原理是 n+1  或者是n+2  .............

那么也就是在某一轮播的item上是没有onclick 事件的，因此解决方案也就出现了，看下面的代码

componentDidUpdate(newProps, newState) {    var bannerItems = document.getElementsByClassName('swiper-slide'),        _this = this;      for (var i = 0, length = bannerItems.length; i < length; i++) {        bannerItems[i].onclick = function(e) {          e.stopPropagation();          e.preventDefault();          var bannerObj = JSON.parse(e.target.dataset.item) || {};          _this.linkTo(bannerObj);        }      }  }

return (      <Swiper        {...params}      >        {that.props.bannerData.map((item,index) => {              return (                    <img  src={item.imgurl} data-item={JSON.stringify(item)}  key={index}/>                )        })}      </Swiper>    )

当我们在组建更新的生命周期里做这样的处理时候问题就可以解决了，现在无论你怎样滑动都没有问题了