隐藏/显示React-slick箭头

Question

我正在使用react-slick，我有自己定制的箭头。这个轮播图不是无限循环的，我想在循环的开始和结束时隐藏箭头。所以基本上在开始时应该隐藏PrevArrow，在结尾时应该隐藏NextArrow。我正在尝试根据状态变化设置隐藏的类名。然而，尽管状态正确地改变了，但类名没有改变。你知道这段代码有什么问题吗？如何使它工作？

以下是我的Slider设置和渲染Slider的组件。

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import Slider from 'react-slick';
import Arrow from '../slider/Arrow';


export default class CityCarousel extends Component {
    constructor(props) {
        super(props);

        this.state = {
            displayLeftArrow: true,
            displayRightArrow: true
        };


        this.slidesToShow = 5;
        this.sliderSetting = {
            dots: false,
            arrows: true,
            infinite: false,
            initialSlide: 0,
            slidesToShow: this.slidesToShow,
            slidesToScroll: 1,
            speed: 500,
            rows: 0,
            nextArrow: <Arrow
                    styleClassName={`city-carousel__right ${
                        this.state.displayRightArrow ? '' : 'city-carousel__right--hide'
                    }`}
                    direction="right"
                    clickHandler={this.clickHandler}
                />,
            prevArrow: <Arrow
                    styleClassName={`city-carousel__left ${
                        this.state.displayLeftArrow ? '' : 'city-carousel__left--hide'
                    }`}
                    direction="left"
                    clickHandler={this.clickHandler}
                />,
            afterChange: currentSlide => this.setArrowDisplay(currentSlide)
        };
    }

    clickHandler = direction => {
        if (direction === 'left') {
            this.slider.slickPrev();
        } else if (direction === 'right') {
            this.slider.slickNext();
        }
    };

    setArrowDisplay = currentSlide => {
        const { cityList } = this.props;
        const displayLeftArrow = currentSlide !== 0;
        const displayRightArrow = currentSlide !== cityList.length - this.slidesToShow;

        this.setState({ displayRightArrow, displayLeftArrow });
    };

    render() {
        const { cityList, tours } = this.props;
        return (
            <div>
                <div className="city-selection">
                    <Slider
                        ref={c => this.slider = c }
                        {...this.sliderSetting}
                    >
                        {cityList.length > 0 ? this.renderCityList() : null}
                    </Slider>
                </div>
            </div>
        );
    }
}

这里还有箭头组件的代码

import React from 'react';
import PropTypes from 'prop-types';

const Arrow = ({ styleClassName, direction, clickHandler }) => {

    return(
    <div
        className={`slick-arrow--${direction} slider-arrow--${direction} ${styleClassName}`}
        onClick={e => clickHandler(direction)}
    />
)};

Arrow.propTypes = {
    styleClassName: PropTypes.string,
    direction: PropTypes.string,
    clickHandler: PropTypes.func
};

export default Arrow;

- Negin Basiri

Answer 1

在2022年，我们有布尔箭头，只需在设置中声明为false即可。

 const settings = {
        ...,
        arrows: false,
    };

- Abdul.Moqueet

Answer 2

看起来react-slick没有使用新的属性重新渲染<Arrow />，它总是使用最初初始化的属性设置。

我认为解决方案是将<Arrow />从滑块中取出，像这样：

    <div className="city-selection">
      <Arrow
        styleClassName={`city-carousel__right ${
          this.state.displayRightArrow ? '' : 'city-carousel__right--hide'
          }`}
        direction="right"
        clickHandler={this.clickHandler}
      />
      <Arrow
        styleClassName={`city-carousel__left ${
          this.state.displayLeftArrow ? '' : 'city-carousel__left--hide'
          }`}
        direction="left"
        clickHandler={this.clickHandler}
      />
      <Slider
        {/* list of items*/}
      </Slider>
    </div>

你可以在这里看到它是如何工作的。

- Emad Emami

---

我认为更好的方法是编辑CSS文件以覆盖默认行为。在您的app.css中，您可以使用.slick-disabled { opacity: 0% !important; }使按钮在禁用时变为透明。 - raph

Answer 3

将当前幻灯片属性传递给组件，并检查要触发隐藏箭头的幻灯片：

function SamplePrevArrow(props) {
    const { currentSlide, className, onClick } = props;
    if (currentSlide === 0) {
        return false;
    } else {
        return <div className={className} onClick={onClick} />;
    }
}

- Jack Wuerfel

Answer 4

在您的this.sliderSettings中设置nextArrow和prevArrow，为您的箭头组件执行此操作：

<Arrow 
  styleClassName={'YOUR_CLASSES_HERE'}
  direction="right" 
  clickHandler={this.clickHandler} 
  isHidden={this.state.isHidden} 
/>

this.state.isHidden 是状态变量，您正在尝试切换箭头。

然后在您的 Arrow 组件中，可以这样做。

 const Arrow = ({ styleClassName, direction, clickHandler, isHidden }) => {

   return (
    <div
     className={`slick-arrow--${direction} slider-arrow--${direction} 
                ${styleClassName}`}
     style={{ display: isHidden: 'none': 'block' }}
     onClick={e => clickHandler(direction)}
    />
   )
 };

- Adeel Imran

---

我按照你的建议实现了，但仍然不行 - 我确认状态已经在改变，但是当我在箭头函数中打印时，它仍然是旧值，而不是更新后的状态。 - Negin Basiri

我已经更新了我的答案，请看一下 Arrow 组件。 - Adeel Imran

还是不行...你有jsFiddler的例子吗？ - Negin Basiri

Answer 5

如果您想要最好的箭头手动控制，请使用自定义箭头。

1. 使用一个简单的箭头组件创建它。

2. 在主要的 Slider 组件中使用 ref 来设置该组件的 onClick 处理程序。

   const sliderRef = useRef<Slider>(null);
   
   <Slider {...settings} ref={sliderRef}>
   

3. 使用状态来有条件地显示或隐藏箭头。

我写了一篇博客文章，介绍了实现类似功能的工作流程。你可以去那里看看。

https://medium.com/@imasharaful/image-slider-with-react-slick-d54a049f043

- Ashraful Islam