我正在尝试使用此 Slider 进行改进,但在 Next.js 项目中使用 TypeScript React 时出现以下错误:
“仅当使用‘--downlevelIteration’标志或使用‘es2015’或更高的‘--target’时,才能迭代类型‘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,所以我不知道如何解决这个问题。
TypeScript 代码被转换为 JavaScript。 TypeScript 开发人员必须决定他们想要瞄准哪个版本的 JavaScript。选择较低版本意味着代码可以在较旧的浏览器中执行,最终达到更大的用户群。开发人员仍然可以使用现代 JavaScript 功能,只要这些功能可以降级的到旧的 JavaScript 版本。
大多数现代 JavaScript 功能都可以在较低版本中模拟,但我们在处理时必须明确IterableIterator
。如果你想编写依赖于IterableIterator
,你必须增加你的target
版本或设置downlevelIteration
to true
.
tsconfig.json:
{
"compilerOptions": {
"target": "es2015"
// or
"downlevelIteration": true
}
}
更多资源:
- Why is downlevelIteration默认不开启? https://stackoverflow.com/questions/53441292/why-downleveliteration-is-not-on-by-default
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)