Slick Carousel 在初始页面加载时不加载答案

【问题标题】：Slick Carousel does not load on initial page loadSlick Carousel 在初始页面加载时不加载
【发布时间】：2016-07-19 14:33:05
【问题描述】：

我在 ES6 和 React.js 中使用 slick carousel，当页面首次加载时轮播似乎坏了。

当我刷新时，一切都到位了。当轮播损坏时，我可以在 html 中看到，它缺少所有光滑的轮播类。每次我重新加载时都有效。我不确定需要做什么。有什么想法吗？

我的轮播 javascript 是：

import $ from 'jquery';
import slick from 'slick-carousel'; 

const ImagesCarousel= {
  start() {
    $('.images-container').slick({
      dots: false,
      arrows: false,
      slidesToShow: 1.5,
      slidesToScroll: 2,
      autoplay: false,
      swipe: true,
      autoplaySpeed: 3000,
      infinite: false,
      mobileFirst: true,

      responsive: [
        {
          breakpoint: 768,
          settings: {
            slidesToShow: 3,
            slidesToScroll: 1,
            dots: false,
            arrows: true,
          }
        }
        ]
    });
  }
};

export default ImagesCarousel;

我在我的主要组件中导入这个，然后启动轮播：

componentDidUpdate() {
   ProductImagesCarousel.start();
  }

而 html 是：

<div className="images">
              {
                this.props.imageUrl.map((url, index) => {
                  return <img src={url} key={index} />
                })
              }
</div>

imageUrl 是从 props 中的对象拉出来的：

const productData = {
  productCode: "abc",
  imageUrl: [
    "./img/test1.jpg",
    "./img/test2.jpg",
    "./img/test3.jpg"
  ],
  name: "Test Product"
}

【问题讨论】：

代码请..代码...
正如一级支持者所说...“我们不知道一般错误。请准确告诉我们你做了什么。”确切的意思是：请向我们展示您的代码，并向我们展示您迄今为止为解决问题所做的工作。
整个代码太长了，我已经用轮播相关的代码关键部分更新了我的问题。
您是否应该在 componentDIdMount() 而不是 componentDidUpdate() 中初始化轮播？
我也试过了，唯一的区别是如果我使用 componentDIdMount()，图像会显示一条细线。所以这两种方式都被破坏了......随着 componenDidUpdate() 图像显示为全尺寸覆盖页面的广泛区域。

标签： javascript reactjs slick.js

【解决方案1】：

看来问题出在 html 标记上。我的图像没有包含在 div 中。我在文档中的任何地方都没有看到这一点，但我只是将图像包装在 div 中，它就开始工作了。以下是我的新标记：

{ this.state.images.map((url, index) => { 
return <div className="thumbnail"><img src={url} key={index} /></div> 
})
}

【讨论】：

这把我逼疯了！感谢浮出水面