溢于在阵营幻灯片油滑渲染

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> 

请注意，你不能定义高度幻灯片里面，否则你会得到相同的问题，但你仍然可以用填充发挥内部样式您的内容。