使用 Typescript 时,使用的 Slick carousel 被识别为 class
Slick carousel being used recognized as a class when using Typescript
我有一个项目,最近改成了打字稿。在这个项目中,我使用 slick 作为我的轮播组件。我在其中使用的组件使用了一个非常简单的逻辑:如果 window 是移动的(宽度状态挂钩),则渲染轮播。如果不是,则渲染另一个组件。这是代码:
import Slider from "react-slick";
...
const ParentElement = (width > 992) ? ItemsWrapper : Slider;
return (
<ParentElement {...settings}>
//some code
</ParentElement>
);
在项目中执行typescript后,现在我在ParentElement
上得到这个错误:
如果我理解正确,它将 Slick 识别为 class,而不是组件。有谁知道为什么会这样?为什么 vanilla React 将 Slick 识别为组件,而现在将 typescript 识别为 class?我四处寻找这种行为,但没有在网上找到任何东西。
请记住,JSX 是 React 组件函数调用的语法糖,因此按照您完成的方式分配 ParentElement 是行不通的。您需要使其成为 returns JSX 的函数,或者更好的是将条件下移到组件的 return 值中:
/* ...the rest of your component... */
return width > 992 ? (
<ItemsWrapper {...settings}>{/* some code */}</ItemsWrapper>
) : (
<Slider {...settings} />
);
我有一个项目,最近改成了打字稿。在这个项目中,我使用 slick 作为我的轮播组件。我在其中使用的组件使用了一个非常简单的逻辑:如果 window 是移动的(宽度状态挂钩),则渲染轮播。如果不是,则渲染另一个组件。这是代码:
import Slider from "react-slick";
...
const ParentElement = (width > 992) ? ItemsWrapper : Slider;
return (
<ParentElement {...settings}>
//some code
</ParentElement>
);
在项目中执行typescript后,现在我在ParentElement
上得到这个错误:
如果我理解正确,它将 Slick 识别为 class,而不是组件。有谁知道为什么会这样?为什么 vanilla React 将 Slick 识别为组件,而现在将 typescript 识别为 class?我四处寻找这种行为,但没有在网上找到任何东西。
请记住,JSX 是 React 组件函数调用的语法糖,因此按照您完成的方式分配 ParentElement 是行不通的。您需要使其成为 returns JSX 的函数,或者更好的是将条件下移到组件的 return 值中:
/* ...the rest of your component... */
return width > 992 ? (
<ItemsWrapper {...settings}>{/* some code */}</ItemsWrapper>
) : (
<Slider {...settings} />
);