[英]TSLint Error "Property 'carousel' does not exist" on Antd Carousel in ReactJs
我在 React & TypeScript 中使用 Ant Design Carousel 组件。 Carousel 组件上有“next”和“prev”方法。
代码运行,但是 TSLint 突出显示“carousel”并抛出此错误“属性 'carousel' 在类型 'StyledCarousel'.ts(2339) 上不存在”。 是否有一些我遗漏的打字声明?
Ant 设计文档在这里
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;
您没有在组件中为字段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;
这对我有用
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;
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.