javascript - 初始化后添加更多图像时，React-slick slider 会变形

Question

我正在使用 React-slick slider 来显示随机用户 API 给出的图像。我按照 npm 页面上给出的 React slider 步骤操作，安装了 slick carousel，并将两个 CSS 文件添加到组件中。

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

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

https://stackblitz.com/edit/react-nlxodz有一个 slider 和其下方的一行文本，连续滑动 slider ，您可以看到在短短几秒钟内 slider 下方的文本被进一步向下推，然后又回到原来的位置。

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

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

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

这个问题是因为我向 slider 添加数据的方式还是 CSS 的问题而引起的？有没有一种解决方案可以在用户快速滑动或滑动时不显示失真？

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