reactjs - useRef 抛出不可分配给类型 LegacyRef| 不明确的
问题描述
我正在使用 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<Slider | undefined>' 不可分配给类型 'LegacyRef | 不明确的'。类型 'MutableRefObject<Slider | undefined>' 不可分配给类型 'RefObject'。属性“当前”的类型不兼容。类型“滑块 | undefined' 不可分配给类型 'Slider | 空值'。类型“未定义”不可分配给类型“滑块 | 空值'。Overload 2 of 2, '(props: Settings, context: any): Slider',给出了以下错误。类型 'MutableRefObject<Slider | undefined>' 不可分配给类型 '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:数字;上一页箭头:假 | 元素; 下一个箭头:假 | 元素; 参考:MutableRefObject<...>; }' 不可分配给类型“只读”。属性“nextArrow”的类型不兼容。输入'假| 元素”不可分配给类型“元素 | 不明确的'。
解决方案
查看这部分错误:
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)
推荐阅读
- scylla - 表的 mean_partition_size 显示错误的极高值
- java - 调试时 onPostExecute() 与 doInBackground() 无关
- java - 抽象工厂设计模式和泛型 - Java
- javascript - Javascript Promise 不等待在下一个 Then() 之前解决
- kubernetes - 使用公司名称和环境自定义 kubernetes 仪表板
- python - 如何在 vsts 发布管道中使用 python 脚本任务
- react-native - 道具类型失败:提供给“ForwardRef(图像)”的道具“来源”无效
- visual-studio-code - 有没有办法在 vscode 片段前缀中使用正则表达式?
- python - 如何在python中打印出列表的某些元素?
- c# - 当“两个表单都打开”时,如何将文本从 form1 传递到 form2