javascript / expert
Snippet
Inversion of Control durch Slot-Patterns
Anstatt Daten nach unten durchzureichen (Prop-Drilling), lässt Inversion of Control (IoC) den Konsumenten entscheiden, welche Komponenten in bestimmten 'Slots' gerendert werden, was das Layout hochgradig wiederverwendbar macht.
snippet.js
javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
const Dashboard = ({ Header, Sidebar, Content }) => (<div className="grid-layout"><header>{Header}</header><aside>{Sidebar}</aside><main>{Content}</main></div>);// Usage<DashboardHeader={<Nav user={user} />}Sidebar={<SimpleLinks />}Content={<MainChart />}/>
react
Erklärung
1
const Dashboard = ({ Header, Sidebar, Content })
Die Komponente akzeptiert andere React-Elemente als Props anstelle von Rohdaten.
2
<header>{Header}</header>
Rendert die injizierte Komponente direkt in den dafür vorgesehenen Layoutbereich.