reactjs - 在 React 中使用 Slick.js 与“infinite: true”，幻灯片被渲染多次

Question

1. 如果我有 1 张幻灯片并刷新页面，则一个 API 调用 = 总数。的幻灯片。这是意料之中的。
2. 当我有 2 张或更多幻灯片时，它会自动创建 2 + 3 = 5 张幻灯片。因此，API 调用 > 总数。的幻灯片。如果我设置infinite:false，那么它将加载实际的幻灯片。因此，API 调用 = 总数。的幻灯片。

即使在使用时，每张幻灯片也不应该有一个 API 调用infinite: true吗？

 import React, { Component } from "react";
 import Slider from "react-slick";

 export default class SimpleSlider extends Component {
   render() {
     const settings = {
       dots: true,
       infinite: true,
       speed: 500,
       slidesToShow: 1,
       slidesToScroll: 1
     };
     return (
       <div>
         <h2> Slick Multiple Render Issue</h2>
         <Slider {...settings}>
           <ChildComponent />
         </Slider>
       </div>
     );
   }
 }

ChildComponent 有一些逻辑可以进行 api 调用....

标签： reactjsslick.js