Использование метода карусели Ant Design для следующей и предыдущей панели в Typescript?

Question

Я использую Ant Design в качестве основы дизайна для моего приложения. Фреймворк имеет компонент Карусель , компонент предоставляет два метода для переключения панелей в карусели.

Вот пример использования его в Javascript .

Вот моя попытка сделать это, используя Typescript:

interface State {
  slider: ReactNode;
}

interface Props {}

class ImageCarousel extends Component<Props, State> {
  private carousel: any;

  constructor(props: Props) {
    super(props);
    this.carousel = React.createRef();
  }

  nextPane() {
    this.carousel.next();
  }
  prevPane() {
    this.carousel.prev();
  }

  render() {
    return (
      <CarouselWrapper>
        <RegularButtonWrapper>
          <RegularButton
            size="large"
            icon="caret-left"
            onClick={this.prevPane}
          />
        </RegularButtonWrapper>
        <FlexCarousel>
          <Carousel
            ref={node => (this.carousel = node)}
            speed={700}
            effect="fade"
            autoplay
            autoplaySpeed={3000}
          >
            <img src={IU} />
            <img src={IU2} />
            <img src={IU3} />
            <img src={IU4} />
            <img src={IU5} />
          </Carousel>
        </FlexCarousel>
        <RegularButtonWrapper>
          <RegularButton
            size="large"
            icon="caret-right"
            onClick={this.nextPane}
          />
        </RegularButtonWrapper>
      </CarouselWrapper>
    );
  }
}

export default ImageCarousel;

Выше не работает - TypeError: Cannot read property 'carousel' of undefined.

Как я могу использовать методы с Typescript?

Answer 1

Вам необходимо получить доступ к методам навигации на самом узле DOM, обратившись к свойству current, где ссылка хранит его. Вот основной пример. Вы получаете эту ошибку, потому что вы используете this внутри ваших предыдущих / следующих методов, так что это на самом деле относится к области действия функции. Попробуйте преобразовать их в функции со стрелками, как показано ниже (связывание методов в конструкторе, как указано в другом ответе, также будет работать).

class App extends React.Component {
  constructor(props) {
    super(props);
    this.carouselRef = createRef();
  }

  onChange = (a, b, c) => {
    console.log(a, b, c);
  };

  handleNext = () => this.carouselRef.current.next();

  handlePrev = () => this.carouselRef.current.prev();

  render() {
    return (
      <div className="App">
        <Carousel afterChange={this.onChange} ref={this.carouselRef}>
          <div>
            <h3>1</h3>
          </div>
          <div>
            <h3>2</h3>
          </div>
          <div>
            <h3>3</h3>
          </div>
          <div>
            <h3>4</h3>
          </div>
        </Carousel>
        <Button onClick={this.handlePrev}>Previous</Button>
        <Button onClick={this.handleNext}>Next</Button>
      </div>
    );
  }
}

Sanbox здесь .

Answer 2

Вам не хватает привязки this в конструкторе исходного JS:

this.nextPane = this.nextPane.bind(this);
this.previousPane = this.previousPane.bind(this);