ReactJs中Antd Carousel上的TSLint错误“属性'carousel'不存在”

Question

我在 React & TypeScript 中使用 Ant Design Carousel 组件。 Carousel 组件上有“next”和“prev”方法。

代码运行，但是 TSLint 突出显示“carousel”并抛出此错误“Property 'carousel' does not exist on type 'StyledCarousel'.ts(2339)”。我缺少一些打字声明吗？

Ant 设计文档Here

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;

Answer 1

这对我有用

import React from 'react';

import { Carousel} from 'antd';
import { CarouselRef } from 'antd/lib/carousel/index';
import { LeftOutlined, RightOutlined} from '@ant-design/icons';

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

  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>
        <LeftOutlined  onClick={this.previous}/>
        <Carousel ref={this.carousel} {...props}>
          <h1>Item 1</h1>
          <h1>Item 2</h1>
          <h1>Item 3</h1>
        </Carousel>
        <RightOutlined  onClick={this.next}/>
      </div>
    );
  }
}

export default StyledCarousel;

Answer 2

您没有在组件中为字段 carousel 定义类型，因此 TSLint 不知道它，也不知道分配给它的对象的方法。你应该像这样在类中定义它：

private carousel: React.RefObject<Carousel>;

另一方面，您还应该考虑使用新语法在 React 组件中创建 refs，并使用 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;

您可以阅读更多内容in this answer 或Refs docs。