Typescript React Как добавить второй интерфейс в Prop

import { ReactNode, DetailedHTMLProps, FormHTMLAttributes } from "react";
import {
  FieldValues,
  SubmitHandler,
  useForm,
  UseFormReturn,
} from "react-hook-form";

// I want to add this type to the FormProps interface
// DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>

interface FormProps<TFormValues extends FieldValues> {
  onSubmit: SubmitHandler<TFormValues>;
  children: (methods: UseFormReturn<TFormValues>) => ReactNode;
}

export const Form = <TFormValues extends Record<string, any>>({
  onSubmit,
  children,
}: FormProps<TFormValues>) => {
  const methods = useForm<TFormValues>();

  return (
    <form onSubmit = {methods.handleSubmit(onSubmit)}>{children(methods)}</form>
  );
};

Я пытаюсь добавить тип данных DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> для формы, не уверен, что это правильный способ сделать это.

reactjs typescript react-hook-form react-typescript

06.10.2022 01:27

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

Используйте extends, чтобы сказать, что интерфейс FormProps состоит из того же содержимого, что и желаемый тип, а также из дополнительных свойств, которые вы указываете.

Убедитесь, что имена свойств не конфликтуют, или, если вы делаете это намеренно, конфликтующие свойства должны иметь совместимые типы. В вашем случае onSubmit и children сталкиваются со свойствами в DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> и имеют несовместимые типы; вместо этого вы можете просто использовать другие имена.

interface FormProps<TFormValues extends FieldValues> extends
    DetailedHTMLProps<FormHTMLAttributes<HTMLFormElement>, HTMLFormElement> {
    // Make sure not to collide properties with incompatible types
    submitHandler: SubmitHandler<TFormValues>;
    methodsHandler: (methods: UseFormReturn<TFormValues>) => ReactNode;
}

export const Form = <TFormValues extends Record<string, any>>({
    submitHandler,
    methodsHandler,
    ...formAttrs
}: FormProps<TFormValues>) => {
    const methods = useForm<TFormValues>();

    return (
        <form onSubmit = {methods.handleSubmit(submitHandler)} {...formAttrs}>{methodsHandler(methods)}</form>
    );
};

Ссылка на игровую площадку

06.10.2022 04:36

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

Ограничить тип одного аргумента на основе другого аргумента в функции typescript

Создание пользовательского компонента с помощью React, проблема с интерфейсами MUI REACT

Машинопись: "напечатать?" является необязательным в массиве, а "undefined" - нет

Выражение универсального класса не работает, если повторяющийся конструктор удален

Пересечение произвольного количества универсальных типов

Есть ли способ сузить тип в той же области блока?

Сужение машинописного текста не работает, когда функция всегда выдает

Uncaught TypeError: невозможно деструктурировать свойство «пользователи» из «(0, _redux_hooks__WEBPACK_IMPORTED_MODULE_11__.useAppSelector)(...)», поскольку оно не определено

Как подключить несколько тегов select в HTML?

Доступ к свойству объекта, ключ которого определяется другим объектом

Typescript React Как добавить второй интерфейс в Prop

Ответы 1

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

Похожие вопросы