定义回调引用 TypeScript 和 react-slick 库
Define callback ref TypeScript and react-slick library
我正在使用 TypeScript 构建一个 React 应用程序。我正在使用 React-Slick 的轮播。
我正在尝试以编程方式更改轮播的幻灯片。因此,我遵循 the documentation 并尝试为滑块创建一个引用。我的组件是这样的:
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 时,会出现一条错误消息:
“属性 'setRef' 在类型 'Section' 上不存在”。如何在 TypeScript 中为 react-slick 库定义回调引用?
要将属性添加到打字稿 class,您需要在 class 的正文中定义它们的类型。
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;
};
}
我正在使用 TypeScript 构建一个 React 应用程序。我正在使用 React-Slick 的轮播。
我正在尝试以编程方式更改轮播的幻灯片。因此,我遵循 the documentation 并尝试为滑块创建一个引用。我的组件是这样的:
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 时,会出现一条错误消息: “属性 'setRef' 在类型 'Section' 上不存在”。如何在 TypeScript 中为 react-slick 库定义回调引用?
要将属性添加到打字稿 class,您需要在 class 的正文中定义它们的类型。
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;
};
}