akiran / akiran/react-slick

TypeScript Compatibility Error with react-slick

Đang mở
#2,404 3 bình luận 0 reaction 0 người được giao Xem trên GitHub
Ngôn ngữ chính
JavaScript
Star
11.9k
Fork
2.1k
Chỉ số merge pull request
Không có pull request nào được merge trong 30 ngày

Mô tả

No overload matches this call.
Overload 1 of 2, '(props: Settings): Slider', gave the following error.
Type 'Element[] | undefined' is not assignable to type 'ReactNode'.
Type 'Element[]' is not assignable to type 'ReactNode'.
Type 'Element[]' is not assignable to type 'Iterable'.
The types returned by '[Symbol.iterator]().next(...)' are incompatible between these types.
Type 'IteratorResult' is not assignable to type 'IteratorResult'.
Type 'IteratorYieldResult' is not assignable to type 'IteratorResult'.

**Steps to Reproduce:**
1. Set up a new TypeScript project with react-slick.
2. Use the Slider component as follows:
`import React from 'react'
import Slider, { type Settings } from 'react-slick'
import 'slick-carousel/slick/slick.css'
import 'slick-carousel/slick/slick-theme.css'

export interface ImagesSliderProps {
eventImages?: string[]
testId?: string
}

export function ImagesSlider({ testId, eventImages }: ImagesSliderProps) {
const settings: Settings = {
dots: true,
speed: 500,
slidesToShow: 3,
slidesToScroll: 1,
arrows: true,
dotsClass: 'button-bar',
centerMode: true,
centerPadding: '8px',
}

return (



{eventImages?.map((slide, index) => (

{`slide-${index}`}

))}


)
}
`

**Expected Behavior:** The Slider component should render without TypeScript errors.

**Actual Behavior:** The TypeScript compiler throws an error related to ReactNode compatibility for children inside the Slider component.

**System Information:**

TypeScript version: 18.2.20
react-slick version: ^0.30.2
slick-carousel version: 1.8.1
"@types/react-slick": "^0.23.13",

**Workarounds Tried:**

Explicitly setting children as React.ReactNode[].
Wrapping content within a Fragment ().
Ensuring the types match by checking Settings type for react-slick.

Hướng dẫn đóng góp

Mở hướng dẫn đóng góp

Đánh giá

Issue này chưa được đánh giá.

Nhận issue mới trong hộp thư của bạn

Bản tóm tắt ngắn những issue GitHub phù hợp với người mới.