Блог

Главная - Вопросы по программированию - Создание повторно используемого компонента с помощью useController дает ценность, как и любой

Создание повторно используемого компонента с помощью useController дает ценность, как и любой

#react-hook-form

Вопрос:

Я пытаюсь создать повторно используемое поле поверх поля третьей стороны. Это просто ввод текста, который имеет режим чтения/редактирования. Соответствующие коды и поля: https://codesandbox.io/s/rhf-generic-text-input-use-controller-4jxom

Я пытался использовать useController или Controller , но мне не хватает некоторых дженериков, потому field.value что есть any . Вот код, который, я думаю, показывает самые многообещающие результаты:

 //TextInputProps comes from 3rd party component
type Name3Props = TextInputProps amp; {
  mode: "edit" | "view";
};

function Name3(props: Name3Props amp; UseControllerProps<any>) {
  const controller = useController(props);
  const field = controller.field;

  // field.value is any but it should be string
  const temp = field.value;

  if (props.mode === "view") {
    return <span>{field.value}</span>;
  }

  return <TextInput {...props} {...field} />;
}

Я использую UseControllerProps<any> , потому что не знаю, как/что там использовать, чтобы получить field.value строку «быть». Я пробовал с just UseControllerProps<T> , но это просто придает ценность as PathValue<T, Path<T>> .

Другая проблема заключается в том, что при попытке использовать мой компонент TS не выдает ошибку, если свойство name содержит что-то, чего нет в ConnectionData. Пример:

 // Here I specify the type for form
const { handleSubmit, control } = useForm<ConnectionData>({

// Later I use the field giving name foo and I get no TS error
<Name3 control={control} labelText="Name3" mode="edit" name="foo" />

// If I use field like this then TS gives me error because foo is
// not a property of ConnectionData 
<Controller
  name="foo"
  control={control}
  render={({ field }) => (
    <TextInput labelText="Normal usage" {...field} />
  )}
/>
Метки: ,