Расширение HTML input элемента

Question

Делаю компонент, который просто расширяет обычный html input.

const Input: React.FC<HTMLAttributes<HTMLInputElement>> = (...props }) => <input {...props}} />

Логика достаточно простая, беру обычный html input, делаю компонент и прокидываю пропсы. В целом, все пропсы нормально прокидываются (placeholder, value, onChange, className и т.д.), но возникает проблема с пропом type.

При попытке назначения типа в компоненте <Input type="text" /> возникает следующая ошибка:

Type '{ type: string; }' is not assignable to type 'IntrinsicAttributes & HTMLAttributes<HTMLInputElement> & { children?: ReactNode; }'.
  Property 'type' does not exist on type 'IntrinsicAttributes & HTMLAttributes<HTMLInputElement> & { children?: ReactNode; }'.

В общем, что-то я делаю не так, но не пойму что именно.

Answer 1

Нашел ошибку, вдруг кому-то пригодится.

Для расширения должен использоваться не HTMLAttributes, а InputHTMLAttributes В итоге получается:

const Input: React.FC<InputHTMLAttributes<HTMLInputElement>> = (...props }) => <input {...props}} />

Либо, в случае расширения через свой интерфейс

interface ICustom extends InputHTMLAttributes<HTMLInputElement> {
myProp: any
}

const Input: React.FC<ICustom> = (myProps, ...props }) => <input {...props}} />

БЛОГ НА HUSL

Расширение HTML input элемента

Ответы (1 шт):