Машинопись. Назначить элемент JSX переменной

У меня есть очень простая функция, которая возвращает ввод и его значение. Проблема в том, что я не знаю, как присвоить элемент JSX переменной. При использовании обычного React все нормально, а вот с TypeScript у меня ошибка. Вот сама функция:

export const useInput = () => {
    const [val, setInputValue] = React.useState("");

    const inputValueHandler = (e: React.FormEvent<HTMLInputElement>) => {
        const currentTarget = e.target as HTMLInputElement;
        setInputValue(currentTarget.value);
    };
      
     const input: JSX.Element = <input value={val} onChange={inputValueHandler}/>;
    
    return [val, input];
  }

здесь появляется ошибка

     const input: JSX.Element = <input value={val} onChange={inputValueHandler}/>;

ошибка

"input" refers to a value, but is used as a type here. Did you mean "typeof input"?ts(2749)

Я не могу воспроизвести эту ошибку! Было бы возможно, если бы вы могли сделать детскую площадку? typescriptlang.org/игровая площадка

alistair 17.05.2022 14:13
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
Как передать состояние или данные в react-router v6
Как передать состояние или данные в react-router v6
react-router - это лучшая библиотека для работы с маршрутизацией в reactjs. С помощью react-router вы передаете состояние или данные от одного...
1
1
30
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Проблема в том, что вы не сообщаете TypeScript, что этот код использует JSX, поэтому он думает, что <input ... является началом утверждение типа (вид угловой скобки, а не вид as). (Плейграунд ссылка на ошибку с игровой площадкой, настроенной на запрет JSX.)

Если вы сообщите TypeScript, что этот код является JSX (например, поместив его в файл .tsx), он будет работать нормально. (Пример игровой площадки без ошибок, если игровая площадка настроена на поддержку JSX.)

Большое спасибо! Да, проблема была в том, что я указал неверное расширение файла - ts вместо tsx!

Макс к 17.05.2022 14:27

Другие вопросы по теме