Ошибка TSLint "Свойство 'карусель' не существует" на карусели Antd в ReactJs - PullRequest
Новая
       12

Ошибка TSLint "Свойство 'карусель' не существует" на карусели Antd в ReactJs

0 голосов
/ 21 февраля 2019

Я использую компонент Ant Design Carousel в React & TypeScript.В компоненте Carousel есть методы «next» и «prev».

Код выполняется, однако TSLint выделяет «карусель» и выдает эту ошибку «Свойство« карусель »не существует для типа« StyledCarousel'.ts (2339) ».Я пропускаю какое-то объявление о наборе?

Документы Ant Design Здесь 

import React from 'react';

import { Carousel, Icon } from 'antd';

class StyledCarousel extends React.Component {

  constructor(props: any) {
    super(props);
    this.state = {};

    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.carousel = React.createRef();
  }

  public next = () => {
    this.carousel.next();
  };

  public previous = () => {
    this.carousel.prev();
  };

  public render() {
    const props = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    };

    return (

      <div>

        <Icon type="left-circle" onClick={this.previous} />

        <Carousel ref={node => (this.carousel = node)} {...props}>

          <h1>Item 1</h1>
          <h1>Item 2</h1>
          <h1>Item 3</h1>

        </Carousel>

        <Icon type="right-circle" onClick={this.next} />

      </div>

    );
  }
}

export default StyledCarousel;

1 Ответ

0 голосов
/ 22 февраля 2019

Вы не определили тип для поля carousel в своем компоненте, поэтому TSLint не знает его, а также не знает методов назначенного ему объекта.Вы должны определить его в классе следующим образом: 

private carousel: React.RefObject<Carousel>;

С другой стороны, вам также следует рассмотреть возможность использования нового синтаксиса для создания ссылок в компонентах React и использования refField.current для доступа к ссылочному компоненту.

Наконец, ваш компонент должен выглядеть следующим образом: 

import React from 'react';

import { Carousel, Icon } from 'antd';

class StyledCarousel extends React.Component {
  private carousel: React.RefObject<Carousel>;

  constructor(props: any) {
    super(props);

    this.next = this.next.bind(this);
    this.previous = this.previous.bind(this);
    this.carousel = React.createRef();
  }

  public next = () => {
    if (this.carousel.current)
      this.carousel.current.next();
  };

  public previous = () => {
    if (this.carousel.current)
      this.carousel.current.prev();
  };

  public render() {
    const props = {
      dots: true,
      infinite: true,
      speed: 500,
      slidesToShow: 1,
      slidesToScroll: 1,
    };

    return (

      <div>

        <Icon type="left-circle" onClick={this.previous} />

        <Carousel ref={this.carousel} {...props}>

          <h1>Item 1</h1>
          <h1>Item 2</h1>
          <h1>Item 3</h1>

        </Carousel>

        <Icon type="right-circle" onClick={this.next} />

      </div>

    );
  }
}

export default StyledCarousel;

Вы можете прочитать больше в этом ответе или в Справочных документах .

...