Question

我正在使用带有React.js的光滑轮播，以及在使用ajax更新幻灯片后我不得不重新初始化轮播。在下拉更改事件中触发ajax调用并更新DOM，但随着更新，滑块停止工作，所有滑块css类都消失。我该怎么做再次触发光滑的旋转木马？我已经尝试了一些我在这里阅读的东西，但是它不起作用，我收到了一个错误：

Uncaught TypeError: Cannot read property 'add' of null

以下是适用于页面加载的代码

componentDidUpdate() {
    if (!this.carouselStarted && this.dataIsLoaded()) {
      this.carouselControl.startCarousel();
      this.carouselDidStart = true;
    } 
  }

下面是组件的主要代码，图像作为道具从父母传递：

import React from 'react';
import {Link} from 'react-router';
import _ from 'lodash';
import Carousel from '../../Util/Carousel';

const ResOpt = [{
    breakpoint: 768,
    settings: {
      slidesToShow: 3,
      slidesToScroll: 3,
      arrows: true,
      dots: false
    }
  }, {
    breakpoint: 600,
    settings: {
      slidesToShow: 1.5,
      slidesToScroll: 1.5,
      arrows: false,
      dots: false,
      infinite: false
    }
  }
];

class ImagesCarousel extends React.Component {
  constructor() {
    super();
    this.carouselDidStart = false;
    this.carousel = new Carousel({
      outerSelector: ".carousel-container",
      innerSelector: ".images-container",
      responsive: ResOpt,
      infinite: false
    });
  }

  componentDidUpdate() {
    if (!this.carouselDidStart && this.dataIsLoaded() ) {
      this.carousel.startCarousel();

    }
  }

  componentWillUnmount() {
    if (this.carousel) {
      this.carousel.destroy();
      this.carousel = null;
    }
  }

  dataIsLoaded() {
    return !_.isEmpty(this.props.images);
  }

  render() {

    let images = this.props.images;

    return (
      <div className="detail-images">

        <div className="carousel-container">
          <div className="images-container">
            {
              (images || []).map((image, index) => {
                return <div key={image.imageId} className="img-item"><img src={image.imageName}  /></div>
              })
            }
          </div>
        </div>
      </div>
    );
  }
}

export default ImagesCarousel;

然后下面是主要的轮播类：

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


export default class Carousel {
  constructor(options) {
    this.carouselIsOn = false;
    this.breakpoint = breakpoint;
    this.innerSelector = options['innerSelector'];
    this.outerSelector = options['outerSelector'];
    this.slickOptions = {
      infinite: options.infinite || true,
      slidesToShow: options['slidesToShow'] || 3,
      slidesToScroll: options['slidesToScroll'] || 3,
      dots: true,
      arrows: true,
      appendArrows: options.appendArrows || `${this.outerSelector}`,
      appendDots: options.appendDots  || `${this.outerSelector}`,

    };
    this.startCarousel = this.startCarousel.bind(this);
  }

  startCarousel() {
    const carouselContainer = $(this.innerSelector);
    carouselContainer.slick(this.slickOptions);
    this.carouselIsOn = true;

  }

 addSlides(slide) {
   $(this.innerSelector).slick('slickAdd', slide);
 }

  destroy() {
    $(this.innerSelector).slick("unslick");
  }


}

我尝试了下面的方法，但这有效，但克隆的幻灯片在进入视图时会更新，如果幻灯片编号在ajax之后增加，则布局会中断。所以我认为幻灯片需要更新，但是当我添加行时：`$（this.innerSelector）.slick（＆＃34; unslick＆＃34;）; 我得到了Uncaught TypeError：无法读取属性＆＃39; unslick＆＃39;未定义的错误。

componentWillUpdate() {
    if (this.carouselControl) {
      this.carouselControl = new CarouselControl(sliderSettings);
    }
  }

我将ComponentWillUpdate方法修改为下面的一个，现在我得到一个不同的错误：Uncaught TypeError：无法读取属性＆＃39; ownerDocument＆＃39;未定义的

componentWillUpdate() {

    let slideTpl = function (img) {
        return <div key={img.imageId} className="img-item"><img src={img.imageName} /></div>;
      };

    if (this.carouselControl) {

      // destroy slick and remove html content
      let el = $('.images-container');
         if (el.hasClass('slick-initialized')) {
            this.carouselControl.destroy();
            el.html('');

            // create slick again
            this.carouselControl = new CarouselControl(sliderSettings);

            // re add slides
            this.props.additionalImages.map( img => {
              this.carouselControl.addSlides(slideTpl(img));
            });
          }

      this.carouselControl = new CarouselControl(sliderSettings);
    }
  }

带有React.js的光滑轮播

0 个答案: