使用 Typescript 时，光滑的轮播被识别为一个类

编程问答 2022-04-16

问题描述

我最近将一个项目更改为打字稿。在这个项目中，我使用 slick 作为我的轮播组件。我使用它的组件使用了一个非常简单的逻辑：如果窗口是可移动的（宽度状态挂钩），则渲染轮播。如果没有，则渲染另一个组件。代码如下：

import Slider from "react-slick";

...

const ParentElement = (width > 992) ? ItemsWrapper : Slider;
    return (
            <ParentElement {...settings}>
                //some code
            </ParentElement>
    );

在项目中执行打字稿后，现在我在 ParentElement 上收到此错误：

enter image description here

如果我理解正确，它会将 Slick 识别为一个类，而不是一个组件。有谁知道为什么会这样？为什么 vanilla React 将 Slick 识别为组件，而现在将 typescript 识别为类？我四处寻找这种行为，但在网上一无所获。

解决方法

请记住，JSX 是 React 组件函数调用的语法糖，因此按照您的方式分配 ParentElement 是行不通的。您需要使其成为返回 JSX 的函数，或者更好的是将条件向下移动到组件的返回值中：

/* ...the rest of your component... */
return width > 992 ? (
    <ItemsWrapper {...settings}>{/* some code */}</ItemsWrapper>
  ) : (
    <Slider {...settings} />
  );
javascriptreactjsreactjsreactjsreactjsslick.jstypescripttypescripttypescript