Несоответствие типов между функцией register () формы Reaction-hook и собственными типами ввода

Question

Я работаю над проектом React с использованием TypeScript и response-hook-form . В некоторых местах я использую данную функцию register () , которую необходимо использовать следующим образом (согласно официальной документации):

<input
  name="test"
  ref={
    register({
      required: true
    })
  }
/>

Проблема, с которой я здесь сталкиваюсь, заключается в том, что эта функция набрана таким образом, что она возвращает void:

(Ref, validateRule?) => void

Но атрибут ref нативного тега input должен иметь тип:

string | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement> | null | undefined

Естественно, TypeScript выдает мне эту ошибку:

Тип 'void' нельзя назначить типу 'string | ((экземпляр: HTMLInputElement | null) => void) | RefObject | ноль | undefined '

У вас есть представление о том, как я могу использовать эту библиотеку, уважая типы? Это ошибка со стороны самой библиотеки?

Answer 1

Я нашел уже решенные ответы по проекту, связанному с Github: https://github.com/react-hook-form/react-hook-form/issues?q=is%3Aissue+is%3Aclosed+register+void+is+not+assignable+to+type

Похоже, в зависимости от того, что вы подключаете в ref проп. Может быть, подумайте об этом при использовании useEffect? ​​

Обращайтесь к этой проблеме: https://github.com/react-hook-form/react-hook-form/issues/598 перенаправьте себя к документации по контролируемым компонентам (может быть в вашем случае). Вы, вероятно, должны использовать useEffect способ, например:

const Comp = () => {
  const { register } = useForm()

  React.useEffect(() => {
    register({ name: "nameOfMyInput" })
  })

  return (
    <input name="nameOfMyInput" />
  )
}