javascript / intermediate
Snippet
Polymorphische Komponenten mit dem 'as'-Prop
Polymorphische Komponenten können als verschiedene HTML-Elemente oder sogar andere React-Komponenten gerendert werden, während sie konsistente Stile oder Logik beibehalten. Das 'as'-Prop ermöglicht es dem Benutzer, das semantische Tag der Komponente zu bestimmen.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
const Box = ({ as: Component = 'div', children, ...props }) => {return (<Component {...props}>{children}</Component>);};// Usage examples:// <Box as="button" onClick={doSomething}>Click Me</Box>// <Box as="section" className="hero">Content</Box>
react
Erklärung
1
as: Component = 'div'
Benennt das 'as'-Prop in eine großgeschriebene Variable um, damit React es als Komponente/Element erkennt.
2
<Component {...props}>
Rendert die dynamische Komponente und übergibt alle restlichen Props wie className oder Event-Handler.