reactjs - 定义回调参考 TypeScript 和 react-slick 库
问题描述
我正在使用 TypeScript 构建一个 React 应用程序。我正在使用 React-Slick 的轮播。
我正在尝试以编程方式更改轮播的幻灯片。因此,我按照文档并尝试为 Slider 创建一个 ref。我的组件是这样的:
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 库定义我的回调引用?
解决方案
要将属性添加到 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;
};
}
推荐阅读
- c - 尝试在发布模式下创建结构时,有时我会收到类似“变量已优化且不可用”之类的错误
- julia - 为什么 Array{Float64,1} 不是 Julia 中 Array{Real,1} 的子类型?
- html - 输入元素未内联显示
- c# - 在两个单独的 glcontrols 上并排显示图像的一半 - openTK
- c# - 我正在尝试使用按钮单击关闭 modelpopupextender,此按钮属于另一个表单,因此 modelpopupextender 无法访问它
- python - 在 Django urls.py 文件中出现“空路径与这些都不匹配”错误
- php - 在 PHP 变量字符串中使用 jquery 函数
- sql - SQL Oracle 中是否有允许在列分区上进行聚合乘法的函数?
- powershell - Powershell:在 CSV 文件中编辑所有换行符和回车符
- elasticsearch - 当它们是“AND-OR”条件时如何使用弹性搜索获取数据(查询生成器)