[英]Slick Carousel Error
有人知道此错误的可能原因吗?
Uncaught TypeError: Cannot read property 'add' of null
我在React.js中使用光滑的轮播。 我将图像数组作为道具传递,并在图像滑块组件中调用slick函数。 该组件在一页上可以正常工作,但在另一页上我仍然看到此错误,滑块中显示图像,但我认为由于此错误,其他内容在页面上中断了,有什么想法吗?
以下是该组件的主要代码,图像作为道具从父级传递:
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} .carousel-nav`,
appendDots: options.appendDots || `${this.outerSelector} .carousel-nav`,
responsive: options.responsive || DEFAULT_RESPONSIVE
};
this.startCarousel = this.startCarousel.bind(this);
}
startCarousel() {
const carouselContainer = $(this.innerSelector);
carouselContainer.slick(this.slickOptions);
this.carouselIsOn = true;
carouselContainer.find('.slick-cloned').attr('data-reactid', null);
}
destroy() {
$(this.innerSelector).slick("unslick");
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.