Блог

Главная - Вопросы по программированию - Автоматическое завершение подсказки типа React TypeScript не работает с React.forwardRef в коде Visual Studio

Автоматическое завершение подсказки типа React TypeScript не работает с React.forwardRef в коде Visual Studio

#reactjs #typescript #visual-studio-code #react-forwardref

Вопрос:

Для обычных компонентов React я вижу правильное автоматическое завершение для реквизитов компонента, подобных этому:

введите описание изображения здесь

Но я пытаюсь создать компонент, React.forwardRef как показано ниже, он не работает, есть идеи?

 export default React.forwardRef<unknown, BaseModalProps amp; FeedbackDetailsContentProps>((props: BaseModalProps amp; FeedbackDetailsContentProps, ref) => {
  return (
    <BaseModal {...props} onlyDisplayOkButton ref={ref} width={600}>
      <FeedbackDetailsContent {...props} />
    </BaseModal>
  );
});

введите описание изображения здесь

Комментарии:

1. Это должно быть связано с тем, что пользовательские типы компонентов не указаны. Если указаны типы реквизитов ожидаемого компонента, то вы должны увидеть предложения.

2. @sunkehappy, пожалуйста, приведите воспроизводимый пример

Ответ №1:

Вы должны unknown заменить указанный тип элемента HTML, например. HTMLInputElement , а также тип, указанный для props , не нужен.

Комментарии:

1. По крайней мере, они должны иметь возможность получить доступ к правильному типу ссылки с BaseModalProps['ref'] помощью .

Ответ №2:

На самом деле, ваша проблема не связана с VSCode, я имею в виду проблемы программирования, особенно область разработки вообще не связана с редактором/IDE.

Давайте закодируем так:

 type ModalProps = BaseModalProps amp; FeedbackDetailsContentProps;

const Modal = (props: ModalProps, ref: any) => (
  <BaseModal {...props} onlyDisplayOkButton ref={ref} width={600}>
    <FeedbackDetailsContent {...props} />
  </BaseModal>
);

export default React.forwardRef<unknown, ModalProps>(Modal);

Ответ №3:

  • Вам не нужно вводить типы два раза. Если вы уже указали типы для generic (внутри <> ), вам не нужно явно вводить аргументы для пересылки
  • Скорее всего, вы бы связали ссылку с кнопкой внутри BaseModal, чтобы тип мог быть HTMLButtonElement вместо неизвестного. Что давайте наберем типы вывода
 export default React.forwardRef<HTMLButtonElement, BaseModalProps amp; FeedbackDetailsContentProps>((props, ref) => {
  return (...);
});

или

 export default React.forwardRef< BaseModalProps amp; FeedbackDetailsContentProps>(
(
  props: BaseModalProps amp; FeedbackDetailsContentProps, 
  ref: ForwardedRef<HTMLButtonElement>
) => {
  return (...);
});
Метки: