javascript / expert
Snippet
Typsichere polymorphe Komponenten mit dynamischen Tags
Polymorphe Komponenten können ihr zugrunde liegendes HTML-Element ändern (z. B. ein Button, der als 'a'-Tag fungiert), während sie die volle TypeScript-Unterstützung für die entsprechenden Attribute beibehalten.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
type ButtonProps<T extends React.ElementType> = {as?: T;children: React.ReactNode;} & React.ComponentPropsWithoutRef<T>;function Button<T extends React.ElementType = 'button'>({as,children,...props}: ButtonProps<T>) {const Component = as || 'button';return <Component {...props}>{children}</Component>;}
react
Erklärung
1
T extends React.ElementType = 'button'
Verwendet Generics, um den Typ des übergebenen Elements zu erfassen, standardmäßig 'button'.
2
React.ComponentPropsWithoutRef<T>
Übernimmt automatisch alle gültigen HTML-Attribute für das spezifisch verwendete Tag.
3
const Component = as || 'button'
Weist das dynamische Tag einer großgeschriebenen Variablen zu, damit JSX es als Komponente behandelt.