4

私は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;
4

4 に答える 4

1

現在のスライド プロップをコンポーネントに渡し、トリガーするスライドのチェックを行い、矢印を非表示にします。

function SamplePrevArrow(props) {
    const { currentSlide, className, onClick } = props;
    if (currentSlide === 0) {
        return false;
    } else {
        return <div className={className} onClick={onClick} />;
    }
}
于 2020-10-26T17:54:26.123 に答える
1

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>

ここでそれがどのように機能しているかを見ることができます

于 2018-01-18T05:45:06.887 に答える
0

あなたのthis.sliderSettingsセットでnextArrow&prevArrowあなたの Arrow コンポーネントのために、このようなことをしてください

<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)}
    />
   )
 };
于 2018-01-15T07:16:37.793 に答える