Unsere Datenschutzrichtlinie wird in Kürze aktualisiert. Bitte sehen Sie sich die Vorschau an.

ReactJS lernen

Attribute als props übergeben

Testen Sie unsere 2015 Kurse

10 Tage kostenlos!

Jetzt testen Alle Abonnements anzeigen
Lernen Sie props als Parametrisierung von React-Komponenten kennen und erfahren Sie, wie Sie Standardwerte sowie Typüberprüfungen für props hinterlegen können.
09:24

Transkript

Props, das ist die Abkürzung für properties, also Eigenschaften. Props können per JSX übergeben werden und sehen aus wie HTML-Attribute. Diese Eingabedaten sind innerhalb der aufgerufenen Komponente schreibgeschützt und können über this.props aufgerufen werden. Über die defaultProps können wir eine Standardbelegung von bestimmten Eingabewerten festlegen. Und mit den propTypes liefert uns React die Möglichkeit, bei der Instanzierung der props deren Typen zu überprüfen. Sehen wir uns dazu ein Beispiel an. Lassen Sie uns noch ein paar Produkte auflisten. Dazu erstellen wir eine neue Klasse Product, die auch von React.Component erbt. Einen leeren constructor. Und dieses Produkt soll am Ende als div gerendert werden, welches eine Überschrift und eine Beschreibung enthält. Die Überschrift in h2 und die Beschreibung als p. Jetzt wollen wir auf props zugreifen. Das heißt, wenn wir uns die Überschrift aufbauen, möchten wir zunächst eine Nummerierung haben. this.props.nr, also eine Nummer, + 1, denn das wird später ein Index sein, also mit 0 beginnen. Danach ein Punkt, und danach möchten wir den Titel des aktuellen Produkts haben, this.props.title. In der Beschreibung verwenden wir this.props.description. Außerdem möchten wir, dass dieses div ein bestimmtes style hat. Also geben wir ihm ein style-Attribut mit. Und zwar möchten wir, dass es ein border hat, also einen Rand, 1px solid grey. Ein padding von 20px, und auch noch einen Rand, also eine margin. Hier sieht man schon einen kleinen Unterschied von JSX im Vergleich zu normalem HTML. Der style ist hier nicht als String angegeben, sondern als Objekt. Jetzt müssen wir nur noch dafür sorgen, dass wir Produkte haben, die wir anzeigen können. Und dass diese Komponente Product richtig aufgerufen wird. Dazu werfen wir einen Blick in die App.js. Ich habe hier einen neuen Ordner erstellt, 01_04, der eine aktualisierte App.js enthält. Diese App rendert sich nun als div mit einem padding von 20px, einer Überschrift, Product Listing. Und nun kommt ein Schleifenaufruf innerhalb dieser App. Da wir an dieser Stelle beginnen, normalen JavaScript-Code zu benutzen und keine spezielle JSX-Syntax, müssen wir diese Stelle mit geschweiften Klammern einschließen. Wir definieren uns zunächst im constructor ein Array namens this._products. Das besteht zuerst aus zwei Objekten, beide mit einem Titel und einer Description. Erst ein "Metal Chair", mit der Description "My favorite chair!". Und ein "Wooden Chair " mit der Description "Super duper chair!" In der render-Methode iterieren wir nun über diese Produkte, indem wir sagen this._products.map. Und hier sehen wir gleich zwei Spezialitäten. Einerseits sehen wir, dass wir eine Arrow-Function verwenden. Das ist ES6-Syntax. Das heißt, wir schreiben hier eine Funktion, die wir in klassischer ES5-Syntax genauso gut mit function aufrufen könnten. Hier noch eine geschweifte Klammer. Und natürlich noch ein return-Statement. Noch die Klammern vertauschen. Diese Arrow-Function war also reine ES6-Syntax. Aber jetzt kommen wir zum eigentlich Interessanten, nämlich zum Aufruf unserer selbst geschriebenen Komponente Product. Wir müssen also Product importieren, das wir im gleichen Ordner abgelegt haben. Dementsprechend muss Product hier auch wieder exportiert werden. Und schon können wir dieses Product wie ein HTML-Element instanzieren. Das ist also das Schöne an JSX, beziehungsweise auch in Kombination mit React. Wir können unsere eigenen Komponenten definieren. Und wir können sie wie gewohnt in HTML-Schreibweise aufrufen. Zusätzlich sehen wir hier, dass wir unserer Komponente einen title mitgeben, eine description und eine Nummer, nr. Wir sehen also, dass wenn wir über products iterieren, wir der map-Funktion eine Funktion mitgeben, die zwei Parameter entgegennimmt, nämlich p und i, also zunächst das Product und danach den aktuellen Index. Danach sagen wir, wir rufen für jedes dieser products, die wir hier oben angegeben haben, einmal in JSX-Schreibweise unsere React-Komponente Product auf. Und was wir nun hier tun, ist, wir geben unserer Komponente props mit. Das heißt, innerhalb unserer Komponente wird dieses hier als title verfügbar sein, also p.title. p.description wird als description verfügbar sein, beziehungsweise unter this.props.description. Und der Index, den wir mitgeben, wird unter this.props.nr verfügbar sein. Was also insgesamt bei diesem Aufruf herauskommt, ist ein Array, und dieses Array ist gefüllt mit unseren products, als React-Komponenten. Wenn wir also nochmal hier zurückschauen, wir haben title, description, und nr. Und genau diese Props verwenden wir hier. nr, title, und description. In der index.js muss natürlich noch der import der App-Klasse geändert werden, damit es auf den aktuellen Ordner passt, nämlich 01_04. Und nachdem wir das erledigt haben, können wir das Frontend auch schon kompilieren. Einmal release-frontend per Grunt. Und nachdem das erfolgt ist, können wir die index.html im Browser öffnen. Und wir sehen, unser Listing ist vorhanden. Wir haben hier den "Metal Chair", "My favorite chair!". Und den "Wooden Chair", "Super duper chair!". Außerdem haben wir hier noch eine Klammer, die natürlich noch gelöscht werden muss. Das ist nämlich eine Klammer zu viel hier. Nochmal speichern, und ausführen. Und auch diese Klammer ist verschwunden. Jetzt können wir noch Standardwerte für unsere Props setzen, falls diese nicht explizit mitgegeben werden. Dafür können wir einen statischen Getter schreiben, static get defaultProps(). Und dieser Getter liefert uns ein Objekt zurück. Wir möchten beispielsweise, dass wenn kein Titel mitgegeben wird, wir einfach schreiben No title. Jetzt können wir unsere App anpassen. Wir können zum Beispiel beim "Wooden Chair" den title einfach wegnehmen. Unser Programm nochmal kompilieren, unser Frontend nochmal bilden. Wir aktualisieren einmal. Und wir sehen, die defaultProps sind eingesprungen. Auf diese Weise können Sie für all Ihre Props Standardwerte hinterlegen. Eine weitere Möglichkeit, die wir in React haben, ist aber auch die Validierung der Props, die wir mitbekommen. Das heißt, wir können React dazu veranlassen, dass es uns alle unsere eingehende Props auf ihre Typen überprüft und uns eine Warnung ausgibt, falls die Typen nicht mit den geforderten Typen übereinstimmen. Dazu können wir wieder ein static get schreiben, und zwar static get propTypes. Und hier wird ebenfalls ein einfaches Objekt returned. Und jetzt können wir zum Beispiel angeben, der Titel soll vom Typ string sein. Also schreiben wir React.PropTypes.string. Und schon weiß React, dass es den Titel darauf prüfen sollte, ob ein String gegeben wurde. Jetzt können wir hier einmal ausprobieren. Wir geben als title eine Zahl mit, 1234. Wir führen uns Frontend einmal aus. Fertig. Wir aktualisieren. Wir sehen, es wurde zwar richtig gerendert, aber wenn wir einen Blick in die Konsole werfen, sehen wir, dass wir hier ein Warning haben, nämlich genau an dieser Stelle. "Failed propType: Invalid prop 'title' of type 'number' supplied to 'Product', expected 'string'. Check the render method of 'App'." Das heißt, diese Validierung ist gleich so freundlich uns mitzusagen, welche Prop einen falschen Typ bekommen hat, welchen Typ diese Prop bekommen hat, was normalerweise erwartet worden wäre, und um welche Komponente es sich handelt. In diesem Video haben Sie gesehen, wie Sie Ihrer React-Komponente Eingabedaten übergeben können, und wie Sie diese Props mit Standardwerten hinterlegen können. Sie wissen nun, wie sich mithilfe der React.propTypes eine Typenvalidierung für die Props durchführen lässt.

ReactJS lernen

Sehen Sie, wie Ihre Anwendung mit der Hilfe von ReactJS von einem virtuellen DOM (Document Object Model) profitiert.

2 Std. 20 min (19 Videos)
Derzeit sind keine Feedbacks vorhanden...
 
Exklusiv für Abo-Kunden
Erscheinungsdatum:05.08.2016

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!