初始化后添加更多图像时，React-slick 滑块会失真答案

【问题标题】：React-slick slider gets distorted when adding more images after initialisation初始化后添加更多图像时，React-slick 滑块会失真
【发布时间】：2020-05-08 08:58:30
【问题描述】：

我正在使用 React-slick 滑块来显示随机用户 API 给出的图像。我按照 npm 页面上为 react 滑块提供的步骤安装了光滑的轮播并将两个 CSS 文件添加到组件中。

如果用户单击下一个箭头或将滑块向左拖动，我想向现有滑块添加更多图像，因此我使用 afterChange 回调来更新我的状态，以便使用 useEffect可以调用将此状态值作为第二个参数，然后将先前的数据与新数据连接起来。

在这里我注意到当用户单击下一步或将滑块向左拖动时，有时会出现失真。

https://stackblitz.com/edit/react-nlxodz 有一个滑块和它下面的一个文本行，连续滑动滑块，你可以看到滑块下面的文本在几秒钟内被推得更深，然后又回到原来的位置。

如果滑块上有 flex 道具，文档建议使用以下 CSS。但是，我的代码没有 flex 属性。

Flexbox support
If you have flex property on container div of slider, add below css

* {
  min-height: 0;
  min-width: 0;
}

这个问题是因为我向滑块添加数据的方式还是 CSS 的问题？当用户快速滑动或滑动时，是否存在不显示失真的解决方案？

【问题讨论】：

标签： javascript css reactjs slick.js react-slick

【解决方案1】：

用div 包裹Slider

 <div style={{ backgroundColor: "green", height: "140px" }}>
          <Slider {...settings}>
            {rowData.map(i => (
              <div>
                <img src={i.picture.large} />
              </div>
            ))}
          </Slider>
        </div>
        <div>KEEP AN EYE ON THIS TEXT WHILE SCROLLING</div>

【讨论】：

这将使所有设备的高度保持固定。如果用户在较小的设备上打开相同的页面，那么该 div 将占用大量屏幕空间。