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

Posted 2023-02-25

【中文标题】React-Slick 在不应该时将内容包装在 div 中

【英文标题】：React-Slick wraps content in div when shouldn't

【发布时间】：2018-05-07 09:27:22

【问题描述】：

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>

【参考方案1】：

问题在于新版本0.23.1。出于某种原因，它将所有幻灯片包装在 div 中，这会破坏结构并且道具会到达意外元素。

通过降级到0.16.0来修复它。