定义回调参考 TypeScript 和 react-slick 库

Question

我正在使用 TypeScript 构建一个 React 应用程序。我正在使用 React-Slick 的轮播。

我正在尝试以编程方式更改轮播的幻灯片。因此我关注the documentation 并尝试为 Slider 创建一个引用。我的组件是这样的：

import React from 'react';
import Resur from './Resur'
const Slider = require("react-slick").default;

export interface Item {
title: string;
restur: Rest[];
}

export interface Rest {
name: string;
online: boolean;
}

interface AppRefs {
slider: any;
}

class Section extends React.Component<{ item: Item }> {
 private slider: any;

 constructor(props: any) {
    super(props);
    this.slider = null;
    this.setRef = element => {
        this.slider = element;
    };
}
renderArrows() {
  return (
    <div className="slider-arrow">
    <button
      className="arrow-btn prev"
      onClick={() => this.slider.slickPrev()}
    >
        <i className="fa fa-chevron-left"></i>
    </button>

    <button
      className="arrow-btn next"
      onClick={() => this.slider.slickNext()}
    >
        <i className="fa fa-chevron-right"></i>
    </button>
  </div>
);
};
render() {
const settings = {
  infinite: true,
  slidesToShow: 3
};
  var rests = this.props.item.restur.map(function(rest, index) {
    return (
      <Resur rest={rest} key={index} />
    )
  });
return(
  <div>
      <h4 className="section-title text-center">{this.props.item.title}</h4>
      <hr></hr>
      {this.renderArrows()}
      <Slider ref={this.setRef} {...settings}>
        {rests}
      </Slider>
  </div>
  )
 }
}
export default Section

当我像这样在我的组件中定义回调 ref 时，出现一个错误： “'Section' 类型上不存在属性 'setRef'”。如何在 TypeScript 中为 react-slick 库定义回调引用？

Answer 1

要向 typescript 类添加属性，您需要在类的主体中定义它们的类型。

class Section extends React.Component<{ item: Item }> {
 private slider: typeof Slider | null; // <---- improved this type
 private setRef: (element: typeof Slider | null) => void; // <---- added this

 constructor(props) {
    super(props);
    this.slider = null;
    this.setRef = element => {
        this.slider = element;
    };
}