React-slick在最後一張幻燈片上隱藏分頁點

Question

我在我的項目中使用了React-Slick組件。除了最後一張幻燈片，我必須在所有幻燈片上顯示分頁點。我想隱藏上一張幻燈片的分頁點。

我檢查過afterChange函數可用作回調函數。這可以用來自定義jQuery中的滑塊css，但是我怎樣才能使用這個函數來隱藏React應用程序中的分頁點？

import Slider from 'react-slick'; 

export default class Carousal extends Component { 
render() { 
    let settings = { 
     accessibility: true, 
     dots: true, 
     infinite: false, 
     speed: 500, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     centerMode: true, 
     centerPadding: '10px', 
     responsive: [{ 
      breakpoint: 768, 
      settings: { 
       swipeToSlide: true 
      } 
     }], 
     afterChange: function (currentSlide) { 
      console.log(currentSlide); 
     } 
    }; 

    return (
     <Slider {...settings} > 
      {slides} 
     </Slider> 
    ); 
} 

Answer 1

On組件構造滑塊組件的點通道的set state值。然後當你不想顯示它時將它設置爲false。

export default class Carousal extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     dots: true 
    }; 
    } 
    render() { 
    let settings = { 
     accessibility: true, 
     dots: this.state.dots, 
     infinite: false, 
     speed: 500, 
     slidesToShow: 1, 
     slidesToScroll: 1, 
     centerMode: true, 
     centerPadding: '10px', 
     responsive: [{ 
     breakpoint: 768, 
     settings: { 
      swipeToSlide: true 
     } 
     }], 
     afterChange: (currentSlide) => { 
     console.log(currentSlide); 
     this.setState({ 
      dots: (currentSlide !== 'yourDesiredSlide') 
     }); 
     } 
    }; 

    return (
     <Slider {...settings} > 
     {slides} 
     </Slider> 
    ); 
    }