react中视频功能和swiper遇到的坑

接到一个react的需求，需要做一个卡片切换的需求，卡片包含轮播，每个卡片的轮播里有图片有视频，切换卡片之后轮播要从新卡片的第一张图片开始轮播，并且当点击播放视频的时候停止轮播，停留在视频播放的页面，手动停止视频播放的时候，继续轮播。
对此我对要做的这个需求主要分为两大点
一、切换卡片
1、重新渲染数据
2、轮播自动播放从新初始化（componentDidUpdate，swiper属性[ stopAutoplay(停止播放)，update(更新播放)，slideTo(滑动)，startAutoplay(开始播放)]）
二、视频播放的时候，停止轮播，视频停止播放后，继续轮播（video属性[ pause()视频暂停，onplaying 视频播放中]）
媒体相关事件可以看这里
swiper3API
react操作dom
react中我通过ref获取dom来操作swiper和video来执行对景的事件，以及依赖生命周期来做更新的操作，以下是大概的代码片段

class VideoCard extends React.Component {
        constructor(props) {
                super(props);
        }
        componentDidMount(){
                this.instanceSwiper();
                this.postVideoClick();
        }
        selectCard( id ) {
                return (e => {
                        this.props.dispatch(switchCard({id}));
                })();
        }
    postVideoClick () {
                let _that = this;
                _that.refs.videoplay && (_that.refs.videoplay.onplaying = function(){
                        _that.swiperObj.stopAutoplay()
                })
        }
    componentWillUnmount() {
                if (this.swiperObj.destroy) { // 销毁swiper
                        this.swiperObj.destroy();
                        this.swiperObj = null;
                }
        }
    componentDidUpdate(){
                this.swiperObj.update();
                this.swiperObj.slideTo(0, 1000, false);
                this.swiperObj.startAutoplay();
               // this.postVideoClick();
    }
    instanceSwiper(){
                let _that = this;
                this.swiperObj = new Swiper(this.refs.lun, {
                        autoplay: 5000,
                        autoplayDisableOnInteraction : false,
                        loop: false,
                        observer:true,
                        prevButton: '.swiper-button-prev',
                        nextButton: '.swiper-button-next',
                        pagination : '.swiper-pagination',
                        // preventClicks : false,
                        preventClicksPropagation : true,
                        paginationClickable :true,
                        touchMoveStopPropagation : false,
                        onSlideChangeStart: function(swiper){
                                _that.refs.videoplay && _that.refs.videoplay.pause();
                                _that.swiperObj.startAutoplay();
                                },
                        onAutoplayStart: function(swiper){
                                _that.refs.videoplay && _that.refs.videoplay.pause()
                                }
                });
    }
 render() {
         const { card, currentCard } = this.props;
         <section className="container">
                <div className=" nav">
                        {
                                 cardList.map((item,index)=>{
                                        return(
                                                <p className={` nav-item ${cardId == item.id ? "active": ""}`} 
                                                key={item.id} 
                                                onClick={()=>{this.selectCard(item.id)}}
                                                > <span className=" name">{item.cardName}</span></p>
                                        )
                                })
                        }
                </div>
                <div className="swiper-container company-swiper-container" ref="lun" onClick={(e)=>{ e.stopPropagation()}}>
                        <div className="swiper-wrapper">
                                { currentCard.videoUrl &&
                                        (<div className="swiper-slide">
                                                <video className="video" 
                                                controls 
                                                poster={currentCard.poster} 
                                                width="100%"
                                                ref="videoplay"
                                                // ref={(c) => this.videoPlay = c} 
                                                key={`${activeLabelId}${currentCard}${currentCard.id}`}
                                                >
                                                        <source src={currentCard.videoUrl}
                                                                        type="video/mp4"/>
                                                        Sorry, your browser doesn't support embedded videos.
                                                </video>
                                        </div>)
                                }
                                {
                                        currentCard.picUrls.map((data, index) => {
                                                return (
                                                        <div className="swiper-slide" key={`swiper${index}`}>
                                                                <img className="swiper-img" src={`${DEFAULTCONS.DEFAULTHOST}${DEFAULTCONS.THUMBNAIL}${data}`}/>
                                                        </div>
                                                )
                                        })
                                }
                        </div>
                        <div className="swiper-pagination"></div>
                        <div className="swiper-button-prev"/>
                        <div className="swiper-button-next"/>
                </div>
        </section>
        }
}

如果有问题可以给我指出来