敏锐滑块的敏锐滑块类没有正确设置最大和最小宽度

Question

这是我的代码：

import React from 'react'
import { useKeenSlider } from 'keen-slider/react'
// Styles
import 'keen-slider/keen-slider.min.css'
interface Props {
children: any
}
// const animation = { duration: 20000, easing: (t: number) => t }
const Slider = ({ children }: Props) => {
// Refs
const [sliderRef] = useKeenSlider<HTMLDivElement>(
{
loop: true,
slides: {
perView: 4
}
},
[
(slider) => {
let timeout: ReturnType<typeof setTimeout>
let mouseOver = false
function clearNextTimeout() {
clearTimeout(timeout)
}
function nextTimeout() {
clearTimeout(timeout)
if (mouseOver) return
timeout = setTimeout(() => {
slider.next()
}, 2000)
}
slider.on('created', () => {
slider.container.addEventListener('mouseover', () => {
mouseOver = true
clearNextTimeout()
})
slider.container.addEventListener('mouseout', () => {
mouseOver = false
nextTimeout()
})
nextTimeout()
})
slider.on('dragStarted', clearNextTimeout)
slider.on('animationEnded', nextTimeout)
slider.on('updated', nextTimeout)
}
]
)
return (
//   @ts-ignore
<div ref={sliderRef} className='select-none keen-slider'>
{React.Children.map(children, (child, i) => (
<div
key={`featuredCape-${i}`}
className={`keen-slider__slide sm:h-300 sm:w-300 ${
i !== 0 ? '' : ''
}`}
>
{child}
</div>
))}
</div>
)
}
export default Slider

以下是我在控制台中得到的内容大小在敏锐的滑块文档中，有一个选项可以将该类正在进行的大小选择设置为null。当我这样做的时候，它确实使大小正确，但它给出了一个错误

选择器：null选择器错误：这是添加选择器空后的错误

尺寸现在可以了！添加选择器空后的大小

Answer 1

我认为这是因为当您编写{React.Children.map(children, (child, i) => ()时，它不会传递子元素的classNames。所以实际上，您在子元素中设置的classNames将不会被看到。应该将此逻辑添加到divchild.props.className ?$｛child.props.className｝: ""

<div
key={`featuredCape-${i}`}
className={`keen-slider__slide sm:h-300 sm:w-300 
${ i !== 0 ? '' : ''}
child.props.className ? `${child.props.className}` : ""
` }
>
{child}
</div>