我尝试使用此Slider进行改进,但在Next.js项目中使用TypeScript React时出现以下错误:
“只有在使用”--downlevelIteration“标志或”--target“为”es 2015“或更高版本时,才能迭代类型”IterableIterator“。”
代码如下:
import { useKeenSlider } from 'keen-slider/react'
import React, { useState } from 'react'
import 'keen-slider/keen-slider.min.css'
import './styles.css'
export default function Slider() {
const [currentSlide, setCurrentSlide] = useState(0)
const [loaded, setLoaded] = useState(false)
const [sliderRef, instanceRef] = useKeenSlider({
initial: 0,
slideChanged(slider) {
setCurrentSlide(slider.track.details.rel)
},
created() {
setLoaded(true)
}
})
return (
<>
<div className="navigation-wrapper">
<div ref={sliderRef} className="keen-slider">
<div className="keen-slider__slide number-slide1">1</div>
<div className="keen-slider__slide number-slide2">2</div>
<div className="keen-slider__slide number-slide3">3</div>
<div className="keen-slider__slide number-slide4">4</div>
<div className="keen-slider__slide number-slide5">5</div>
<div className="keen-slider__slide number-slide6">6</div>
</div>
</div>
{loaded && instanceRef.current && (
<div className="dots">
{[
...Array(instanceRef.current.track.details.slides.length).keys()
].map(idx => {
return (
<button
key={idx}
onClick={() => {
instanceRef.current?.moveToIdx(idx)
}}
className={'dot' + (currentSlide === idx ? ' active' : '')}
></button>
)
})}
</div>
)}
</>
)
}
我遵循了Keen Slider文档,但是这个例子是用JavaScript编写的。因为我使用的是TypeScript,所以我不知道如何解决这个问题。
1条答案
按热度按时间0dxa2lsx1#
TypeScript被移植到JavaScript。为了达到更大的用户群,他们可能仍然在使用较低版本的JavaScript,TypeScript编译器通常也被配置为针对较低版本。大多数现代功能甚至可以在较旧的版本中 * 模仿 *。这就是为什么即使你的目标版本可能已经超过10年了,你仍然可以使用JavaScript的大多数最新功能。
IterableIterator
不能在旧版JavaScript中被简单地模拟。TypeScript要求您增加目标版本或将downlevelIteration
设置为true。