溢於在陣營幻燈片油滑渲染

Question

我不認爲這是正常的行爲或作出反應油滑的，但是當初始化我的頁面（通過地址欄），旋轉木馬的樣子說：

由於你可以看到，屏幕右側有一個棕色條。 但是，當我調整我的瀏覽器窗口，它顯示很好。

有什麼辦法防止渲染組件時？

Answer 1

我想通了，這樣是什麼原因造成我的組件上這種行爲，我定義幻燈片的高度：

const heightCarousel = '80vh' 

    <Slider {...settings}> 
     <div style={{height:heightCarousel, background:'#F4CC67', padding:'15px 0', textAlign:'center'}}><h3>1</h3></div> 
     <div style={{height:heightCarousel, background:'#AA8326', padding:'15px 0', textAlign:'center'}}><h3>2</h3></div> 
    </Slider> 

，而不是下面，它可以讓陣營，光滑的自動定義每張幻燈片的寬度：

<Slider {...settings}> 
      <div style={{background:'#F4CC67', textAlign:'center'}}><div><h2>TEST</h2></div></div> 
      <div style={{background:'#AA8326', textAlign:'center'}}><h3>2</h3></div> 
    </Slider> 

請注意，你不能定義高度幻燈片裏面，否則你會得到相同的問題，但你仍然可以用填充發揮內部樣式您的內容。