css - React Slick 渲染幻灯片上的溢出

Question

我不认为这是正常行为或 React Slick，但是当初始化我的页面（通过地址栏）时，轮播看起来像这样：

如您所见，屏幕右侧有一个棕色条。但是当我调整浏览器窗口的大小时，它显示得很好。

渲染组件时有什么方法可以防止这种情况发生吗？

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>

而不是下面，它让 React-slick 自动定义每张幻灯片的宽度：

    <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>

请注意，您不能在幻灯片中定义高度，否则您会遇到同样的问题，但您仍然可以使用填充来设置内部内容的样式。