useRef выдает не назначаемый тип LegacyRef ‹Slider› | неопределенный

Я использую response-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 >)

Ползунок, используемый в качестве типа, - это компоненты слайдера, импортированные из response-slick, который я беру, я получаю сообщение об ошибке только в коде VScode, работает в браузере нормально:

Этому вызову не соответствует ни одна перегрузка. Перегрузка 1 из 2, '(props: Settings | Readonly): Slider' вызвала следующую ошибку. Введите 'MutableRefObject ‹Slider | undefined ›'не может быть назначен типу' LegacyRef | неопределенный'. Введите 'MutableRefObject ‹Slider | undefined ›нельзя присвоить типу RefObject. «Текущие» типы собственности несовместимы. Введите 'Слайдер | undefined 'не может быть назначен типу' Slider | нулевой'. Тип undefined не может быть назначен типу Slider | нулевой'. Перегрузка 2 из 2, '(props: Settings, context: any): Slider' вызвала следующую ошибку. Введите 'MutableRefObject ‹Slider | undefined ›'не может быть назначен типу' LegacyRef | неопределенный'.

РЕДАКТИРОВАТЬ:

Этому вызову не соответствует ни одна перегрузка. Перегрузка 1 из 2, '(props: Settings | Readonly): Slider' вызвала следующую ошибку. Введите '{children: Element []; точки: логические; бесконечный: логический; скорость: число; slidesToShow: number; slidesToScroll: number; prevArrow: false | Элемент; nextArrow: false | Элемент; ref: MutableRefObject ‹...›; } »не может быть назначен типу« Только для чтения ». Типы свойства nextArrow несовместимы. Введите 'false | Element "нельзя присвоить типу" Element | неопределенный'. Тип «false» нельзя присвоить типу «Element | неопределенный'. Перегрузка 2 из 2, '(props: Settings, context: any): Slider' вызвала следующую ошибку. Введите '{children: Element []; точки: логические; бесконечный: логический; скорость: число; slidesToShow: number; slidesToScroll: number; prevArrow: false | Элемент; nextArrow: false | Элемент; ref: MutableRefObject ‹...›; } »не может быть назначен типу« Только для чтения ». Типы свойства nextArrow несовместимы. Введите 'false | Element "нельзя присвоить типу" Element | неопределенный'.


reactjs typescript use-ref react-slick
person Marko B.    schedule 22.06.2021    source источник
comment
Приведите воспроизводимый пример на любой игровой площадке.   -  person captain-yossarian    schedule 22.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

См. Эту часть ошибки:

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)
person casraf    schedule 22.06.2021
comment
Отредактировал ответ - person casraf; 22.06.2021