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 来修复它。

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

React-Slick wraps content in div when shouldn't

slider

reactjs

slick.js

react-slick