Búsqueda de sitios web

javascript - El deslizador no funciona en react-slick con typescript

Estoy usando la versión de TypeScript (@types/react-slick) de la librería react-slick para implementar un carrusel/slider en un proyecto de Next.js. Estoy obteniendo el siguiente error después de importar el componente Slider desde el paquete:

Aquí está el mensaje de error exacto que se muestra cuando se pasa el cursor sobre "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

El código que se muestra a continuación es un componente de carrusel que deseo crear y que deslizará imágenes y textos:

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>
  );
}

Respuesta #1

En mi caso, el problema raíz era tener algunas dependencias que listaban "@types/react": "*" en sus dependencias. Esto provoca que aparezcan múltiples versiones de las definiciones de tipos de React en node_modules, lo que resulta en errores de Typescript como XX no puede ser usado como un componente JSX.. Hay una discusión extensa sobre el problema y lo que deberían hacer los mantenedores de bibliotecas en GitHub.

La solución alternativa para mí (yarn v2) fue ejecutar

yarn dedupe '@types/react'

Consulta el GitHub de arriba para soluciones alternativas para otros gestores de paquetes.

Respuesta #2

vas a querer usar un "ref" de React así:

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

Y luego pasa eso a tu componente deslizador así:

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

Artículos relacionados