withFormatting
definiert, die eine React-Komponente entgegen nimmt. Die Funktion gibt dabei eine neue React-Komponente zurück, welche die in die Funktion herein gegebene Komponente rendert und ihr dabei die Props bold
und italic
übergibt. Die hereingegebene Komponente kann nun auf diese Props zugreifen:PriceTable
-Komponente, die selbst keinerlei Kenntnis davon hat, ob sie nun die aktuellen Joghurtpreise aus dem örtlichen Supermarkt darstellt oder Preise von Kryptowährungen auf irgendeiner beliebigen Börse. Entsprechend nennen wir sie auch sehr generisch PriceTable
:isLoading
, um ihr mitzuteilen, dass die Daten, die sie einmal darstellen soll, aktuell noch geladen werden; items
, was ein Array aus „Artikeln“ mit Preisen repräsentiert und loadData
, eine Funktion, die erneut einen API-Request startet um die neuen Daten zu beziehen.PriceTable
kann nicht nur Crypto-Preise anzeigen, die withCryptoPrices
-Komponente muss ihre Daten nicht zwangsweise in einer PriceTable
darstellen. Wir haben hier also zwei vollständig gekapselte und wiederverwendbare Komponenten erstellt!PriceTable
-Komponente als Parameter an die withCryptoPrices
-Komponente übergeben. Aha! Und das sieht wie folgt aus:CryptoPriceTable
, stößt die Higher Order Component beim componentDidMount()
einen API-Request an und übergibt das Ergebnis dieses Requests an die ihr übergebene PriceTable
-Komponente. Diese kümmert sich anschließend nur noch um die entsprechende Darstellung.withCryptoPrices
-HOC zu „verbinden“. Um dieses mächtige Konzept einmal anhand eines Beispiels zu verdeutlichen, geben wir die Preise nun im CSV-Format aus. Unsere HOC bleibt dabei völlig unverändert. Unsere Layout-Komponente könnte wie folgt implementiert werden:items
vorhanden sind. Hier könnte man anfangen darüber nachzudenken, auch dies in einer weiteren HOC zu bündeln, denn HOCs lassen sich beliebig ineinander schachteln, sind es doch am Ende lediglich Funktionen, die als Parameter an andere Funktionen weitergegeben werden.items
, picken uns über die Object Destructuring Syntax die für uns relevanten Eigenschaften name
, symbol
und current_price
heraus und umschließen die einzelnen Zeilen mit einem pre
-Element um den Zeilenumbruch am Ende der Zeile korrekt darzustellen.PriceTable
haben wir hier allerdings noch eine weitere (optionale) Prop eingeführt: separator
- um der Render-Komponente mitzuteilen welches Trennzeichen sie bei der Darstellung der Daten verwenden soll. Die Prop kann wie in JSX üblich bei der Verwendung der Komponente als simple Prop angegeben werden:withCryptoPrices
-HOC notwendig. Momentan werden lediglich die fest definierten Props isLoading
, items
und loadData
an die Kind-Komponente (WrappedComponent
) übergeben:<CryptoCSV separator="," />
angegebene separator
-Prop auch korrekt an die PriceCSV
-Komponente übergeben wird, müssen wir unserer HOC mitteilen, dass sie auch alle weiteren Props an die WrappedComponent
übergibt. Je nach Einsatzzweck können weitere erlaubte Props entweder explizit übergeben werden, oder aber es werden einfach sämtliche weiteren Props übergeben:{...this.props}
, die Spread-Syntax aus ES2015+, leiten wir hier sämtliche Props an die Kind-Komponente weiter.