光滑的滑块在reactjs中多次渲染幻灯片答案

【问题标题】：Slick slider render slide multiple times in reactjs光滑的滑块在reactjs中多次渲染幻灯片
【发布时间】：2020-05-11 15:30:28
【问题描述】：

我正在使用 reactjs 创建光滑的滑块。滑块工作正常，但它会多次渲染幻灯片。我正在使用地图功能循环播放幻灯片。

截图：

我的脚本：

import React, {Component} from 'react';
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import '../css/Header.css';
//import SlideItem from './SlideItem';
class SliderSlick extends Component{

    shouldComponentUpdate () {
      // TODO: add proper implementation that compares objects
      return false;
    }

    render() {

       //Slide Items
        var sliderItem = ['slider1.jpg','slider2.jpg','slider3.jpg'];

        var settings = {
          autoplay: false,
          dots: true,
          infinite: true,
          slidesToShow: 1,
          slidesToScroll: 1,
          speed: 1000,

        };


        return (
          <div className="container">
          <Slider {...settings}>
            {
              sliderItem.map((item,index) => {
                return (
                    <div data-index={index} key={index}>
                        <img src={process.env.PUBLIC_URL + '/images/'+item} alt="Continental GT 650" />
                    </div>
                )
              })
            }
          </Slider>
          </div> 
        );
      }
}

export default SliderSlick;

我做错了什么？

【问题讨论】：

您使用的是infinite: true，它基本上是一个接一个地弹出具有相同属性的幻灯片

标签： reactjs loops slider slick.js

【解决方案1】：

这不是错误，它是在最后一项和下一项的动画中获得最佳性能的功能！。这就是光滑滑块无限循环的工作原理。如果滑块只会克隆图像/div，那么最终会出现性能问题。现在，如果你真的不想克隆图像/div，那么你需要设置

infinite: false

或

infinite: sliderItem.length > 3 // may be best solution

【讨论】：