掛載slider組件後頁面底部多出一倍高度的空白，如下：

slider組件內容??：

class Slider extends Component{
  constructor(){
    super();
  }
  componentDidMount(){
    var index = 0;
    setInterval(function () {
        index++;
        if(index>3)
        {
          index=0;
          $(‘.list‘).css(‘left‘,‘0‘);
        }
        $(
 
‘.contain .list‘).animate({‘left‘:index*-375 },1000)
    },3000);
  }
  render(){
    return <div className="contain">
            <ul className="list">
              {
                this.props.slide_img.map((item,index)=>{
                  return <li key={index}><img className=‘list_img‘ src={item.src} alt=‘圖片加載失敗‘></img></li>
                })
              }
            
 
</ul>
          </div>
        }
}

css樣式??：

.contain{
    width: 400%;
    height: 295px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.list{
    width: 100%;
    height: 295px;
    position: absolute;
    left: 0px;
}
.list>li {
    float: left;
    width: 25%; 
    height: 
 
100%;
}
.list_img {
    display: block;
    height: 100%;
    width: 100%;
} 

解決方法：針對根組件添加樣式設置??

#root{
    width: 100%;
    height: 100%;
    overflow: scroll;
}                  ／*即index.html文件中根組件div的id值為root*／
.contain{
    width: 400%;
    height: 295px;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
}
.list{
    width: 100%;
    height: 295px;
    position: absolute;
    left: 0px;
}
.list>li {
    float: left;
    width: 25%; 
    height: 100%;
}
.list_img {
    display: block;
    height: 100%;
    width: 100%;
} 

成功解決??

react-踩坑記錄——頁面底部多出一倍高度的空白