Блог

Главная - Вопросы по программированию - Как определить интерфейс реквизитов с переданными значениями состояния/setState?

Как определить интерфейс реквизитов с переданными значениями состояния/setState?

#reactjs #typescript #next.js

Вопрос:

В настоящее время я изучаю машинопись и обнаружил проблему в своем приложении после добавления React.Функциональный компонент моих компонентов, произошла ошибка с моим интерфейсом реквизита

 Type '({ value, setValue, }: Props) => JSX.Element' is not assignable to type 'FunctionComponent<{}>'.
   Types of parameters '__0' and 'props' are incompatible.
      Type '{ children?: ReactNode; }' is missing the following properties from type 'Props': value, setValue ts(2322)

Есть часть моего кода:

 interface Props {
    value: string
    setValue: React.Dispatch<React.SetStateAction<string>>
    children: React.ReactNode
}

const SearchInput: React.FunctionComponent = ({
    value,
    setValue,
}: Props) => {}

Я пытался использовать только ReactNode, я пытался использовать JSX.Element, но ничего не работает, не мог бы кто-нибудь объяснить мне, в чем проблема и как ее решить?

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

1. удалите дочерние элементы из интерфейса и определите поисковые данные следующим образом: const SearchInput: React.FC<Props> = ({value, setValue}) => {}

Ответ №1:

React.FunctionComponent это универсальный компонент, вам нужно передать ему свой Props : React.FunctionComponent<Props> . Это также позволяет опустить аннотацию типа для аргумента функции, так как она может быть получена автоматически:

 const SearchInput: React.FunctionComponent<Props> = ({
    value,
    setValue,
}) => {}
Метки: