useRef 抛出无法分配给类型 LegacyRef<Slider> | 不明确的

Question

我正在使用react-slick-slider，我想要实现的是制作自定义箭头。
所以代码看起来像这样：

const FeedbackSlider = () => {
const [isLargeScreen] = useMediaQuery("(min-width: 1050px)")

const sliderRef = useRef<Slider>()

const prev = () => {
    sliderRef.current?.slickPrev()
}
const next = () => {
    sliderRef.current?.slickNext()
}
const settings = {
    dots: false,
    infinite: true,
    speed: 500,
    slidesToShow: (isLargeScreen ? 2 : 1),
    slidesToScroll: 1,
    prevArrow: (isLargeScreen && <PrevArrow />),
    nextArrow: (isLargeScreen && <NextArrow />)
};
return (
    <Box px={['2', '4', '8', '16']} mx='auto' pt='12'>
        <Slider ref={sliderRef} {...settings}>
           // slider cards...
        </Slider>
        {!isLargeScreen && (
            <Flex alignItems='center' w='5xs' justifyContent='space-between' mx='auto' my='5'>
                <PrevArrow onClick={prev} />
                <NextArrow onClick={next} />
            </Flex>)}
    </Box >)

用作类型的滑块是从react-slick导入的滑块组件，我正在使用它的参考我只在VScode中收到错误，代码可以在浏览器中正常工作：

没有重载与此调用匹配。重载第 1 个（共 2 个）“（属性：设置 | 只读）：滑块”出现以下错误。类型 'MutableRefObject<Slider | undefined>' 不可分配给类型 'LegacyRef | 不明确的'。类型 'MutableRefObject<Slider | undefined>' 不可分配给类型'RefObject'。“当前”属性的类型不兼容。输入“滑块| 未定义' 不可分配给类型'Slider | 无效的'。类型“未定义”不可分配给类型“Slider |” 无效的'。重载 2 个，共 2 个，“(props: Settings, context: any): Slider”，出现以下错误。类型 'MutableRefObject<Slider | undefined>' 不可分配给类型 'LegacyRef | 不明确的'。

编辑：

没有重载与此调用匹配。重载第 1 个（共 2 个）“（属性：设置 | 只读）：滑块”出现以下错误。类型 '{ 子元素：元素[]; 点：布尔值；无限：布尔值；速度：数量；SlidesToShow：数量；SlidesToScroll：数字；上一个箭头： false | 元素; 下一个箭头： false | 元素; ref: MutableRefObject<...>; }' 不可分配给类型“Readonly”。属性“nextArrow”的类型不兼容。输入“假|” 元素”不可分配给类型“元素|” 不明确的'。类型“false”不可分配给类型“Element |” 不明确的'。重载 2 个，共 2 个，“(props: Settings, context: any): Slider”，出现以下错误。类型 '{ 子元素：元素[]; 点：布尔值；无限：布尔值；速度：数量；SlidesToShow：数量；SlidesToScroll：数字；上一个箭头： false | 元素; 下一个箭头： false | 元素; ref: MutableRefObject<...>; }' 不可分配给类型“Readonly”。属性“nextArrow”的类型不兼容。输入“假|” 元素”不可分配给类型“元素|” 不明确的'。

Answer 1

看这部分的错误：

Type 'Slider | undefined' is not assignable to type 'Slider | null'. Type 'undefined' is not assignable to type 'Slider | null'.

useRefundefined如果未传递默认值，则添加到类型。你可能想像这样传递 null ：

// bad:
const sliderRef = useRef<Slider>() // type: Slider | undefined
// good
const sliderRef = useRef<Slider | null>(null) // type: Slider | null

至于你的第二个错误，请查看最后部分并尝试推断发生了什么：

Types of property 'nextArrow' are incompatible. Type 'false | Element' is not assignable to type 'Element | undefined'.

似乎nextArrow接受 anElement或 an undefined。目前您正在传递这样的箭头：

prevArrow: (isLargeScreen && <PrevArrow />),
nextArrow: (isLargeScreen && <NextArrow />)

请注意，如果isLargeScreenis false，它将返回false而不是undefined，这不是Slider道具的有效类型。将其更新为如下所示：

prevArrow: (isLargeScreen ? <PrevArrow /> : undefined),
nextArrow: (isLargeScreen ? <NextArrow /> : undefined)