Question

我正在使用光滑的旋转木马并试图获得幻灯片计数。我正在使用React.js和ES6，下面是我用来返回计数的函数，但我不明白的是console.log（＆＃34; inside＆＃34; + n） ;打印值，而外部打印为null，我做错了什么？

 countSlides() {
    let n = 0;
    $(this.innerSelector).on('init', (event, slick) => {
      n = slick.slideCount;
      console.log("inside" + n);
    });

    console.log("outside" + n);
    return n;

  }

我为carousel创建了一个类，因此我可以在不同的父组件中实例化。例如，我有这个：

class ImageCarousel extends React.Component {
  constructor() {
    super();
    this.carouselDidStart = false;
    this.carouselControl = new CarouselControl({
      outerSelector: ".carousel-container",
      innerSelector: ".extra-images-container",
      infinite: false
    });
  }

然后在CarouselControl类中我试图添加这个countSlides函数，这样我就可以找到像这样的幻灯片数量.carouselControl.countSlides（）;

Answer 1

$(this.innerSelector).on是一个事件监听器，因此当事件触发时它将被触发，因此它是异步函数。你也可以这样做：

 constructor() {
   this.slideCount = 0;
 }

 componentDidMount() {
   $(this.innerSelector).on('init', (event, slick) => {
    this.slideCount = slick.slideCount;
   });
 }

 countSlides() {
   return this.slideCount; 
 }

Answer 2

使用选项行，您可以获得幻灯片数量

$(this).slick("slickGetOption", "rows")

光滑的旋转木马幻灯片计数

2 个答案: