Используйте useImperativeHandle в функциональном компоненте с машинописным текстом, это подскажет некоторую ошибку;

Введите '{ фокус(): недействительным; }" отсутствуют следующие свойства типа "HTMLdivElement": align, addEventListener, removeEventListener, accessKey и 234 more.ts(2740) index.d.ts(1041, 79): ожидаемый тип исходит из возвращаемого типа этой подписи.

вот код компонента:

import React, { forwardRef, useImperativeHandle, useRef } from "react";

type Ref = HTMLDivElement | null;
type SwiperProps = {
  children?: React.ReactNode | null;
  selectedIndex?: number;
};

const Swiper = forwardRef<Ref, SwiperProps>(
  ({ children = null }: SwiperProps, ref) => {
    const inputRef = useRef(null);
    useImperativeHandle(ref, () => ({
      focus() {
        inputRef.current.focus();
      }
    }));
    return (
      <div ref = {ref}>
        {children}
        <input type = "text" ref = {inputRef} />
      </div>
    );
  }
);

export default Swiper;

полный код находится в codeandbox;

https://codesandbox.io/s/useimperativehandlecomponenterror-lowon

reactjs typescript react-hooks

15.12.2020 07:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

6 239

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы перепутали определения типов ваших рефов:

import React, { forwardRef, useImperativeHandle, useRef } from "react";

type Ref = {
  focus: () => void
} | null;
type SwiperProps = {
  children?: React.ReactNode | null;
  selectedIndex?: number;
};

const Swiper = forwardRef<Ref, SwiperProps>(
  ({ children = null }: SwiperProps, ref) => {
    const inputRef = useRef<HTMLInputElement>(null);
    useImperativeHandle(ref, () => ({
      focus() {
        inputRef.current?.focus();
      }
    }));
    return (
      <div>
        {children}
        <input type = "text" ref = {inputRef} />
      </div>
    );
  }
);

export default Swiper;

Тип, который вы предоставляете, должен описывать ваш императивный дескриптор.

Если вы нашли этот ответ полезным, отметьте его как принятый ответ

— 15.12.2020 09:37

Моя репутация слишком низкая, я не могу голосовать за ваш ответ

— 15.12.2020 10:32

не нужно голосовать, просто примите это

— 15.12.2020 10:35

@thedude Это больше не работает. На app.tsx:10 у нас ошибка при вызове focus.

— 03.09.2021 12:25

Я обновил ссылку, чтобы исправить ошибку типа

— 26.02.2023 11:49

15.12.2020 08:58