Я использую npm i react-multi-carousel
, но когда я добавляю карусель в свой код, я получаю «ошибку TS2604: тип элемента JSX« Карусель »не имеет никакой конструкции или сигнатуры вызовов»
Я использую этоКарусель в мой SPFx с использованием кода JS реагирует.
import * as React from 'react';
import styles from './HomeFeaturedDocument.module.scss';
import { escape } from '@microsoft/sp-lodash-subset';
import Carousel from "react-multi-carousel";
import "react-multi-carousel/lib/styles.css";
export interface IFeaturedDocumentsState {
_featureddocuments: Array<IFeaturedDocument>
}
const responsive = {
superLargeDesktop: {
// the naming can be any, depends on you.
breakpoint: { max: 4000, min: 3000 },
items: 5,
},
desktop: {
breakpoint: { max: 3000, min: 1024 },
items: 3,
},
tablet: {
breakpoint: { max: 1024, min: 464 },
items: 2,
},
mobile: {
breakpoint: { max: 464, min: 0 },
items: 1,
},
};
export default class HomeFeaturedDocument extends React.Component<IHomeFeaturedDocumentProps, IFeaturedDocumentsState> {
public constructor(props: IHomeFeaturedDocumentProps) {
super(props);
}
public render(): React.ReactElement<IHomeFeaturedDocumentProps> {
return (
<Carousel
swipeable={false}
draggable={false}
showDots={true}
responsive={responsive}
ssr={true} // means to render carousel on server-side.
infinite={true}
autoPlaySpeed={1000}
keyBoardControl={true}
customTransition="all .5"
transitionDuration={500}
containerClass="carousel-container"
removeArrowOnDeviceType={["tablet", "mobile"]}
dotListClass="custom-dot-list-style"
itemClass="carousel-item-padding-40-px"
>
<div>Item 1</div>
<div>Item 2</div>
<div>Item 3</div>
<div>Item 4</div>
</Carousel>
);
}
}
![enter image description here](https://i.stack.imgur.com/v3ZNN.png)
Я думаю, проблема в том, что эта карусель находится в реакции, и я добавляю ее намашинописный файл.Если это правда, то кто-нибудь может подсказать мне, как использовать это в файле TS или любой другой альтернативе?