类型“IntrinsicAttributes & Props”上不存在属性“...”

Question

I have a <InputField> component in my app with the following type definition for the props:

interface InputFieldProps extends React.HTMLAttributes<HTMLInputElement> {
  customProp: string;
}

My component looks like this:

const InputField: React.FC<InputFieldProps> = ({ customProp, ...htmlProps }) => {

  return (
    <input {...htmlProps} />
  );
};

I would expect that I can now pass the prop disabled or required to that component, as these properties are part of the HTMLInputElement type definition. However, I get the error:

Property 'disabled' does not exist on type 'IntrinsicAttributes & Props'

I tried passing disabled as disabled={true} as well as just disabled with no success. I can, however, pass placeholder as a prop. So some properties in the HTMLInputElement type definition seem to work, while others don't.

Answer 1

Using React.InputHTMLAttributes<HTMLInputElement> and making sure every additional property, such as customProp does not reach your input . In the below example, because customProp is destructed on its own, htmlProps would include only input properties.

interface InputFieldProps extends React.InputHTMLAttributes<HTMLInputElement> {
  customProp: string;
}

const InputField: React.FC<InputFieldProps> = ({
  customProp,
  ...htmlProps
}) => {
  return <input {...htmlProps} />;
};