reactjs - React-Slick 在不应该时将内容包装在 div 中

Question

React-Slick 几天前应该正常工作，现在我更新了版本，它将所有幻灯片包装在一个 div 中，这打破了旧结构并且表现得很奇怪。

我试图降级并删除所有设置，但没有帮助。我知道在降级到以前的版本后我有同样的问题很奇怪，但我完全确定 2 天前它工作正常。

这是我使用 react-slick 的方法：

<Slider {...sliderSettings}>
  <div><h1>test</h1></div>
  <div><h1>test 1</h1></div>
  <div><h1>test 2</h1></div>
</Slider>

以下是设置：

const sliderSettings = {
  dots: true,
  lazyLoad: true,
  className: 'slider',
  dotsClass: 'dots',
  arrows: false,
  autoplay: true,
}

这是浏览器中的标记：

<div data-index="0" class="slick-slide" tabindex="-1" aria-hidden="true" style="outline: none; width: 1275px;">
  <div> <<-- This div shouldn't be here
    <div tabindex="-1" style="width: 100%; display: inline-block;">
      <h1>test</h1>
    </div>
  </div>
</div>

Answer 1

问题出在新版本上，0.23.1. 出于某种原因，它将所有幻灯片都包裹在一个div中，这会破坏结构并且道具会到达意想不到的元素。

通过降级来修复它0.16.0。