componentDidMount() {

    setTimeout(() => {
        this.getPicHeight("0","details_photoArr")
    }, 500);
}

//解决幻灯图片加载
getPicHeight=(index,id)=>{
    var height=0;
    var width=0;
    if(isNaN(index)){
        index=0;
    }
    var path =$("#"+id+index).attr("src")
    if(String(path) != "undefined"){
        var w_width=Number(document.body.clientWidth);
        var nImg = new Image();
        nImg.src = path;
        nImg.onload = function () {
            var w = nImg.width;
            if(w > w_width){
                height=(w_width/w)*(nImg.height);
                width=w_width;
            }else {
                height=nImg.height;
                width=nImg.width;
                console.log("图片小"+ nImg.height+" path:"+path)
            }
            $("#"+id+" .slider-list").css({"height":height+"px"})
            $("#"+id+" .slider-slide").css({"background":"#fff"})
            $("#"+id+index).css({"height":height+"px","width":width,"margin":"auto","display":"block"})
            // console.log("height:"+height+" w:"+(w/w_width) +" w_:"+nImg.width +" h:"+nImg.height)
        }
    }
}

//DOM ID 并且幻灯加上 afterChange事件
<p id="details_photoArr">
        <Carousel autoplay ={false} infinite={true}  afterChange={index => this.getPicHeight(index,"details_photoArr")}>

            {this.state.photoArr ? this.state.photoArr.map(((v, index)=>(
                    <img  className={styles.banner_pic}
                          src={v}
                          id={"details_photoArr"+index}
                          alt=""
                          style={{verticalAlign: 'top',"margin":"auto" }}
                          className={styles.arr_pic}
                    />
                )))

                :''}
        </Carousel>
</p>