reactjs - Typ av en prop baserat på typen av andra props

Jag har en generell komponent som accepterar en prop som heter component och resten av propsen bör vara propsen för den specifika komponenten. Hur kan jag göra det i TypeScript?

d.v.s. :

 <FormField component={Input} ... />

Detta FormField bör acceptera vilka props som helst som Input-komponenten accepterar.

Notera:

  • Jag vill härleda typen från props. Vill inte skicka ytterligare typ

Svar #1

Jag tror att du kan göra detta med hjälp av en generisk

const FormField = <K,>(props: FormFieldProps & K) => {
    //Your component here
}

Användning :

<FormField<InputProps> .... />

Svar #2

Utifrån @A.Vinuela:s svar gör jag det bara enklare att använda, utan att behöva känna till komponentens props-gränssnitt, och använder även Reacts inbyggda hjälpfunktioner.

Jag tror att du kan göra detta med hjälp av en generisk typ och den inbyggda hjälpfunktionen React.ComponentPropsWithoutRef<T> (eller React.ComponentPropsWithRef<T>, beroende på dina behov).

const FormField = <K>(props: FormFieldProps & React.ComponentPropsWithoutRef<K>) => {
    //Your component here
}

Användning :

<FormField<typeof AnyComponent> .... />

Tyvärr är det inte möjligt att bestämma typen av en egenskap beroende på den dynamiska typen av en annan egenskap (åtminstone, såvitt jag vet).

Vad du skulle behöva är:

// UNFORTUNATELY THIS IS NOT VALID
interface FormFieldProps {
component: T,
props: React.ComponentPropsWithoutRef<T>
}

Men du kan inte använda en dynamisk typvariabel som T som typen för component-egenskapen.

Så jag tror att den bästa lösningen är att använda den generiska som visas ovan.

Relaterade artiklar