javascript - slick-slider 中的纯 JS 到 ReactJS

Question

我正在尝试编写这段代码

if (currentSlide === 0) {
  $('.slick-prev').hide();
  $('.slick-next').show();
}
else {
    $('.slick-prev').show();
}

//If we're on the last slide hide the Next button.
if (slick.slideCount === currentSlide + 1) {
    $('.slick-next').hide();
}

在slick carousel的React版本中工作。有人能指出我正确的方向吗？

代码是隐藏和显示slick的箭头在轮播的第一张和最后一张幻灯片上时。

Answer 1

您可以使用 afterChange 回调来设置组件的状态并放置一个空 div 作为 nextArrow。它看起来与 nextArrow 类似，我想您也会看到如何为 prevArrow 实现它:(不要忘记在构造函数中绑定(bind)该函数)

onIndexChange(index){
  this.setState({index});
}

 <Slider afterChange={this.onIndexChange} 
         nextArrow={this.state.index === 5 ? <div></div>:null}>
    <div><h3>1</h3></div>
    <div><h3>2</h3></div>
    <div><h3>3</h3></div>
    <div><h3>4</h3></div>
    <div><h3>5</h3></div>
    <div><h3>6</h3></div>
  </Slider>