ошибка TS2604: тип элемента JSX «Карусель» не имеет конструкции или сигнатуры вызовов - PullRequest
0 голосов
/ 28 сентября 2019

Я использую 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

Я думаю, проблема в том, что эта карусель находится в реакции, и я добавляю ее намашинописный файл.Если это правда, то кто-нибудь может подсказать мне, как использовать это в файле TS или любой другой альтернативе?

1 Ответ

0 голосов
/ 28 сентября 2019

Попробуйте этот код,

class HomeFeaturedDocument extends React.Component<IHomeFeaturedDocumentProps, IFeaturedDocumentsState> {
    render() {
        return <div>Your Data</div>;
    }
} 
export default HomeFeaturedDocument
...