滑块在带有打字稿的react-slick中不起作用

Question

我正在使用react-slick库的typescript版本（@types/react-slick）在Nextjs项目中实现轮播/滑块。从包中导入 Slider 组件后出现以下错误：

以下是将鼠标悬停在“滑块”上时显示的确切错误消息：

'Slider' cannot be used as a JSX component.
  Its instance type 'Slider' is not a valid JSX element.
    The types returned by 'render()' are incompatible between these types.
      Type 'React.ReactNode' is not assignable to type 'import("c:/Users/bello/node_modules/@types/react/ts5.0/index").ReactNode'.
        Type 'PromiseLikeOfReactNode' is not assignable to type 'ReactNode'.ts(2786)
(alias) class Slider
import Slider

下面的代码是我希望创建的轮播组件，它将滑动图像和文本：

SlickCarousel.tsx

import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";
import Slider from "react-slick";
import { agentReviewListType } from "../_models/props";
import Image from "next/image";

export default function SlickCarousel({
  items,
}: {
  items: agentReviewListType;
}) {
  const settings = {
    dots: true,
    infinite: true,
    speed: 500,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  return (
    <section>
      <Slider {...settings}>
        {items.map((item, index) => (
          <article key={index}>
            <Image src={item.image} alt="image" />
            <p>{item.message}</p>
          </article>
        ))}
      </Slider>
    </section>
  );
}

Answer 1

你会想要使用像这样的反应“ref”：

const sliderRef = React.useRef<Slider>(null);

然后将其传递到滑块组件中，如下所示：

<Slider ref={sliderRef} {...settings}> {items.map((item => RENDER_YOUR_ITEM_HERE))} </Slider>