useRef 抛出不可分配给类型 LegacyRef<Slider> |不明确的答案

【问题标题】：useRef throws not assignable to type LegacyRef<Slider> | undefineduseRef 抛出不可分配给类型 LegacyRef<Slider> |不明确的
【发布时间】：2021-09-05 18:27:16
【问题描述】：

我正在使用 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 >)

用作类型的 Slider 是从我正在使用的 react-slick 导入的 Slider 组件我只在 VScode 代码中出现错误，在浏览器中可以正常工作：

没有重载匹配这个调用。重载 1 of 2，'(props: Settings | Readonly): Slider'，给出了以下错误。类型 'MutableRefObject' 不可分配给类型 'LegacyRef |不明确的'。类型 'MutableRefObject' 不可分配给类型 'RefObject'。属性“当前”的类型不兼容。类型“滑块 | undefined' 不可分配给类型 'Slider |空值'。类型“未定义”不可分配给类型“滑块 |空值'。 Overload 2 of 2, '(props: Settings, context: any): Slider'，给出了以下错误。类型 'MutableRefObject' 不可分配给类型 'LegacyRef |未定义'。

编辑：

没有重载匹配这个调用。重载 1 of 2，'(props: Settings | Readonly): Slider'，给出了以下错误。类型'{孩子：元素[];点：布尔值；无限：布尔值；速度：数字； slidesToShow：数字； slidesToScroll：数字；上一页箭头：false |元素;下一个箭头：假 |元素;参考：MutableRefObject<...>; }' 不可分配给类型“只读”。属性“nextArrow”的类型不兼容。输入'假|元素”不可分配给类型“元素 |不明确的'。类型 'false' 不可分配给类型 'Element |不明确的'。 Overload 2 of 2, '(props: Settings, context: any): Slider'，给出了以下错误。类型'{孩子：元素[];点：布尔值；无限：布尔值；速度：数字； slidesToShow：数字； slidesToScroll：数字；上一页箭头：false |元素;下一个箭头：假 |元素;参考：MutableRefObject<...>; }' 不可分配给类型“只读”。属性“nextArrow”的类型不兼容。输入'假|元素”不可分配给类型“元素 |未定义'。

【问题讨论】：

请在任何游乐场提供可重现的示例

标签： reactjs typescript use-ref react-slick

【解决方案1】：

查看这部分错误：

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

useRef 将 undefined 添加到类型中，如果它没有传递默认值。你可能想像这样传递 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 接受Element 或undefined。目前您正在传递这样的箭头：

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

请注意，如果 isLargeScreen 是 false，它将返回 false 而不是 undefined，这不是 Slider 属性的有效类型。将其更新为如下内容：

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

【讨论】：