javascript / expert
Snippet
Polymorphe Komponenten mit TypeScript Generics
Polymorphe Komponenten ermöglichen es einer einzelnen React-Komponente, als verschiedene HTML-Elemente oder andere Komponenten gerendert zu werden, während die Typsicherheit für die spezifischen Attribute dieses Elements erhalten bleibt.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
type BoxProps<T extends React.ElementType> = {as?: T;children: React.ReactNode;} & React.ComponentPropsWithoutRef<T>;function Box<T extends React.ElementType = 'div'>({ as, ...props }: BoxProps<T>) {const Component = as || 'div';return <Component {...props} />;}
react
Erklärung
1
type BoxProps<T extends React.ElementType>
Definiert einen generischen Typ, der jeden gültigen React-Elementtyp (wie 'div', 'button' oder eine eigene Komponente) akzeptiert.
2
as?: T;
Prop 'as' bestimmt das zugrunde liegende Element, das gerendert werden soll.
3
& React.ComponentPropsWithoutRef<T>
Verwendet Intersection-Types, um alle gültigen HTML-Attribute für den in T angegebenen Elementtyp einzubeziehen.