Question

我正在使用Ant Design作为我的应用程序的设计框架。该框架有一个Carousel组件，该组件提供了两种方法来切换轮播中的窗格。

下面是在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

您需要通过访问ref存储它的current属性来访问DOM节点本身上的导航方法。这是一个基本示例。之所以会出现此错误，是因为您在上一个/下一个方法中使用了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 here。

Answer 2

您从原始JS中丢失了cronstructor中的this绑定：

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

Answer 3

感谢@Chris-B。如果您使用此代码在反应中使用函数组件：

function App () {

    const carousel = useRef();

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

 const handleNext = () => carousel.current.next();

 const handlePrev = () => carousel.current.prev();

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

在Typescript中使用Ant Design的轮播下一个和上一个窗格方法？

3 个答案: